Advies Driehoek over background-image

Erick

Gewaardeerd
Lid geworden
17 mei 2007
Berichten
1.317
Waarderingsscore
2
Punten
38
Als voorbeeld wil ik even deze 'codepen' nemen. Ik zou graag hetzelfde effect creëren waarbij de driehoek niet naar beneden wijst, maar naar rechtst of links.

Iemand een idee hoe ik de css dan moet herschrijven?
 

Rubensky

Administrator
Forumleiding
Lid geworden
17 okt 2011
Berichten
20.515
Waarderingsscore
274
Punten
83
Wellicht is dit een goed begin:
 

maulem

Vaak hier
Lid geworden
23 feb 2017
Berichten
568
Waarderingsscore
22
Punten
18
Ik heb een driehoek naar links gemaakt. Maar het heeft even geduurd.

CSS:
.wrap {
  position: relative;
  overflow: hidden;
  width: 70%;
  height:150px;
  margin: 0 auto;
  background-color:#fff;
}
.wrap img {
  width: 100%;
  height: auto;
  display: block;
}
.wrap:before, .wrap:after {
  content:'';
  position: absolute;
  height: 70%;
  width: 4%;
  background-color: inherit;
}
.wrap:before {
  left: 0%;
  top: -50%;
  -ms-transform-origin: 100% 100%;
  -webkit-transform-origin: 100% 100%;
  transform-origin: 100% 100%;
  -ms-transform: skewY(-45deg);
  -webkit-transform: skewY(-45deg);
  transform: skewY(-45deg);
}
.wrap:after {
  left: 0%;
  bottom: -50%;
  -ms-transform-origin: 100% 100%;
  -webkit-transform-origin: 100% 100%;
  transform-origin: 100% 100%;
  -ms-transform: skewY(45deg);
  -webkit-transform: skewY(45deg);
  transform: skewY(45deg);
}
 

Erick

Gewaardeerd
Lid geworden
17 mei 2007
Berichten
1.317
Waarderingsscore
2
Punten
38
Bedankt voor het meedenken, heren. Hier kan ik al wat mee!
 

Erick

Gewaardeerd
Lid geworden
17 mei 2007
Berichten
1.317
Waarderingsscore
2
Punten
38
@maulem Ik ben met jouw css aan de slag gegaan. Daar kom ik al heel ver mee. Nou wordt mijn wrap een vierkante div. Dit kan ik met vw/vh instellen, maar dan krijg ik de driehoek aan de linkerkant niet meer mooi verticaal uitgelijnd. Ik denk dat ik dan iets moet aanpassen in jouw stukje css, maar daar kom in nog niet zo uit. Heb jij toevallig een tip?
 
Laatst bewerkt:

maulem

Vaak hier
Lid geworden
23 feb 2017
Berichten
568
Waarderingsscore
22
Punten
18
Is de driehoek dan verschoven? Als je wilt zet jouw huidige CSS - die met de verkeerde verticale uitlijning dus - neer in een volgend bericht. Dan kan ik er naar kijken. Ik kan namelijk niet zo van hier uit zeggen wat je aan de instellingen moet veranderen.
 

Erick

Gewaardeerd
Lid geworden
17 mei 2007
Berichten
1.317
Waarderingsscore
2
Punten
38
@maulem Nee, de driehoek was niet verschoven. Doordat ik er een vierkant van maakte, pas de afbeelding met meer passend. Daardoor leek het of de driehoek niet meer in het midden stond, maar de onderkant van de afbeelding was gewoon bereikt.

Bedankt voor je inspanning en het meedenken.
 

maulem

Vaak hier
Lid geworden
23 feb 2017
Berichten
568
Waarderingsscore
22
Punten
18
Okay, ik begrijp het. Graag gedaan!
 

Erick

Gewaardeerd
Lid geworden
17 mei 2007
Berichten
1.317
Waarderingsscore
2
Punten
38
In het voorbeeld wordt de afbeelding via een linkje aangeroepen. Is het ook mogelijk om dit via de css te doen waarbij de afbeelding als achtergrond van een div kan fungeren?
 

Erick

Gewaardeerd
Lid geworden
17 mei 2007
Berichten
1.317
Waarderingsscore
2
Punten
38
Als ik jouw voorstel probeer in de codepen, ben ik de arrow weer kwijt. Want de .wrap heeft de achtergrondkleur die aansluit bij de onderliggende of naastgelegen div.
 

maulem

Vaak hier
Lid geworden
23 feb 2017
Berichten
568
Waarderingsscore
22
Punten
18
Dus je bedoelt dat de .wrap niet de afbeelding als achtergrond heeft, maar een egale kleur? Dan kan ik niet begrijpen waarom je een afbeelding als achtergrond wilt gebruiken. Of bedoel je dat dat bij een andere div moet?
 

Erick

Gewaardeerd
Lid geworden
17 mei 2007
Berichten
1.317
Waarderingsscore
2
Punten
38
Als je kijkt naar de Codepen css, dan heeft de .wrap een background-color. Ik meen dat die achtergrondkleur gebruikt wordt om de driehoek te creëren, dan wel de overgang met de divs erom heen. Dus die kan ik niet vervangen door een achtergrondafbeelding. Anders ben ik mijn driehoek kwijt. Klopt mijn gedachtengang?
 

maulem

Vaak hier
Lid geworden
23 feb 2017
Berichten
568
Waarderingsscore
22
Punten
18
Dat zou kunnen. In mijn css staat inherit als waarde voor de background-color van de before and after rechthoeken:

.wrap:before, .wrap:after {
content:'';
position: absolute;
height: 70%;
width: 4%;
background-color: inherit;
}

Dat betekent dat deze in dit geval wit (#fff) worden. Maar dat zou je kunnen vervangen door #fff als dat nodig is. De driehoek wordt namelijk gecreëerd door twee witte rechthoeken met schuine kanten. En dan voor .wrap de achtergrondafbeelding gebruiken. Maar de background-color hoef je niet persé weg te halen uit de css van .wrap.
 

Erick

Gewaardeerd
Lid geworden
17 mei 2007
Berichten
1.317
Waarderingsscore
2
Punten
38
Bedankt voor je snelle reactie Maulem. Dus in de .wrap kan ik de achtergrondafbeelding instellen, terwijl de background-color gehandhaafd blijft in de .wrap:before en .wrap:after. Ik ga daar eens mee aan de slag!
 

Nieuwste berichten

Bovenaan Onderaan