Hallo WoodyF4u,
Zie voorbeeldafbeelding:
Deze afbeelding is verborgen voor gasten.
Login of registreer om deze te zien.
Ook als het gele gedeelte breder of hoger wordt, moet de rechterzijkant even schuin blijven. Het blauwe gedeelte moet de kleur van de achtergrond krijgen, dus net of de afbeelding daar is 'afgeknipt'.
Op zich heb ik dit geprobeerd met css, maar daar kom ik niet helemaal uit. Dwz: geef je een custom module een class mee, blijft dit niet netjes op dezelfde plaats om de afbeelding staan bij het veranderen van de schermgrootte. Ik heb hierbij methode 2 van
deze pagina
gebruikt. (Methode 1, met 'clip-path' lijkt helemaal niet te werken.)
html:
Code:
<div class="moduletable shape"><h3>Blabla</h3>
<div class="custom shape">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi at nunc libero. Maecenas pharetra commodo ullamcorper. Donec vehicula facilisis luctus. Sed imperdiet libero leo, et venenatis sem rhoncus et. Vestibulum et pulvinar lorem.</p>
<p><img alt="" src="/images/test.jpg"><span style="float: right;">Linkje naar andere pagina >></span></p></div>
</div>
css:
Code:
.shape {
background: #fff none repeat scroll 0 0;
color: #fff;
margin: 0;
position: relative;
z-index: 1;
}
.shape::after {
background: inherit;
bottom: -1px;
content: "";
display: block;
height: 40%;
left: 0;
position: absolute;
right: 0;
transform: skewX(-18deg);
transform-origin: 100% 350% 0;
width: 20%;
z-index: 1;
}
Voor de opdrachtgever zou dit betekenen dat hij alleen een class-naam moet toevoegen.
Maar probleem hierbij is dat de tekst van het linkje niet over het (in dit geval) witte vlak heen gezet kan worden. En dit blijft niet goed op dezelfde plaats staan bij het verkleinen van het scherm. Waarschijnlijk ontkom ik er niet aan een extra div hier of daar ergens toe te voegen. Dat maakt voor mij niet uit natuurlijk, maar of dit straks voor de eindgebruiker nog te volgen is?
Edit: Bij het toevoegen van een class-naam aan een module, wordt die naam automatisch op minstens 2 plaatsen gezet. In dit geval bij moduletable en bij custom.
Heeft onderwerp gestart
