Ik heb een ontwerp gemaakt voor een website met een schuin blok. Nu ben ik bezig om het daadwerkelijk te maken met CSS en HTML alleen denk ik dat er een handigere manier moet zijn om dit te doen dan wat ik nu doe.
Zo moet het er uit komen te zien:
Het gaat dus om het zwarte blok aan de linker kant. Nu los ik dit op door een afbeelding in de vorm te plaatsen over de hele lengte en breedte van de website. En in de zwarte box moet ook een witte box komen met een regel tekst er in (zie bovenstaande foto). Ik heb de breedte van de witte box gemeten en zeg maar die vorm gemaakt en als achtergrond gebruikt voor een div (zelfde manier als de zwarte) alleen dit komt niet altijd even mooi uit in verschillende browsers.
Is er een manier om bijvoorbeeld de box met CSS te maken (zonder afbeelding) en dan de witte box alleen laten zien wat in de schuine zwarte box valt? Ik moet ook rekening houden dat de zwarte box automatisch verlengt als de pagina langer wordt, zie onderstaande afbeelding hoe ik dit graag hebben wil.
Mijn code:
CSS:
.black
{
position: relative;
float: left;
min-width: 100%;
min-height: 100vh;
background-image: url('http://beta.stucadoorsbedrijf-enschede.nl//images/black.png');
}
.contact-info
{
position: relative;
clear: both;
width: 696px;
height: 60px;
background-image: url('http://beta.stucadoorsbedrijf-enschede.nl//images/contact-info.png');
}HTML:
<div class="black">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam sed massa sapien.</p>
<hr></hr>
<h1>Some text...</h1>
<div class="contact-info-text">
<p>Some extra text here, lorem ipsum...</p>
</div>
</div>
Ik hoop dat jullie snappen wat ik bedoel.
