• De afgelopen dagen zijn er meerdere fora waarop bestaande accounts worden overgenomen door spammers. De gebruikersnamen en wachtwoorden zijn via een hack of een lek via andere sites buitgemaakt. Via have i been pwned? kan je controleren of jouw gegeven ook zijn buitgemaakt. Wijzig bij twijfel jouw wachtwoord of schakel de twee-staps-verificatie in.

Advies Driehoek over background-image

Status
Niet open voor verdere reacties.

Erick

Gewaardeerd
Lid geworden
17 mei 2007
Berichten
1.359
Waarderingsscore
3
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?
 
Wellicht is dit een goed begin:
 
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);
}
 
Bedankt voor het meedenken, heren. Hier kan ik al wat mee!
 
@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:
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.
 
@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.
 
Okay, ik begrijp het. Graag gedaan!
 
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?
 
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.
 
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?
 
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?
 
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.
 
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!
 
Status
Niet open voor verdere reacties.
Steun Ons

Nieuwste berichten

Terug
Bovenaan