[CSS] pijltje met outline

[posttoast]

Ik probeer hier iets voor elkaar te brouwen waarvan ik aanvankelijk dacht: appeltje eitje. Maar ik ben er inmiddels al dik een uur mee bezig, en ik krijg het niet goed voor elkaar

Wat ik wil, is dit:



Natuurlijk kan ik hiervoor een (SVG) plaatje als achtergrond gebruiken, maar ik vind het veel fraaier om dit met puur CSS te doen. Mijn gedachte was als volgt: het element een border van 2px geven, en dan een :after en een :before met een gesimuleerde driehoek (door middel van borders), waarbij de :after 2 pixels kleiner is dan de :before, zodat ik het lijntje simuleer. Hier hoort de volgende CSS bij:

Cascading Stylesheet:

*, *::after, *::before {
    box-sizing: border-box;
}
.pijltje {
    position: relative;
    margin: 20px 0 0 0;
    display: inline-block;
    height: 36px;
    text-transform: uppercase;
    font-size: 14px;
    color: black;
    text-decoration: none;
    padding: 0 20px;
    line-height: 36px;
    background: #fff;
    border: 2px solid red;
}
.pijltje:before {
    display: block;
    content:'';
    border-top: 20px solid transparent;
    border-bottom: 20px solid transparent;
    border-left: 12px solid red;
    position: absolute;
    top: -4px;
    right: -12px;
}
.pijltje:after {
    display: block;
    content:'';
    border-top: 18px solid transparent;
    border-bottom: 18px solid transparent;
    border-left: 12px solid #fff;
    position: absolute;
    top: -2px;
    right: -10px;
}

Het resultaat komt in de buurt, maar is bepaald niet netjes te noemen:



Dit is te bewonderen in deze JSFiddle.

Wie helpt mij om dit goed te krijgen? Welke denkfout maak ik?

[Jogai]

Hier een update:
http://jsfiddle.net/wh16qx4v/1/
(gebaseerd op http://cssarrowplease.com/)

Maar die schuine lijnen zijn wat dunner, dat zal ook wel de reden zijn dat ze bij cssarrowplease de hoek kleiner als de box maken.

Meer inspiratie: http://codepen.io/search/pens?q=Arrow+box

[Afvalzak]

Als ik deze border-widht en margin-top toevoeg aan de .arrow_box:before werkt het wel.

Cascading Stylesheet:

.arrow_box:before {
    border-left-color: #f00;
    border-width: 20px;
    margin-top: -20px;
    border-width: 21px;
    margin-top: -21px;
}

Het blijft natuurlijk een beetje een hack imho

[Jogai]

Afvalzak schreef op woensdag 14 oktober 2015 @ 10:35:
Als ik deze border-widht en margin-top toevoeg aan de .arrow_box:before werkt het wel.

Cascading Stylesheet:

.arrow_box:before {
    border-left-color: #f00;
    border-width: 20px;
    margin-top: -20px;
    border-width: 21px;
    margin-top: -21px;
}

Het blijft natuurlijk een beetje een hack imho

Zoiets dacht ik al, alleen dacht ik dat hij asymettrisch zou worden vanwege de 3 pixels. Update hier: http://jsfiddle.net/wh16qx4v/6/ (wie 2-5 heeft gemaakt weet ik niet...)

[DJMaze]

Zo kan ook: http://jsfiddle.net/wh16qx4v/9/
Zie ook de nifty mouse pointer

P.S.: Je kan met transform natuurlijk best veel verschillende schapes maken naar je goesting.
P.S.2: zie het menu op http://mhxsolutions.nl/ met een transform:matrix()

[ Voor 83% gewijzigd door DJMaze op 15-10-2015 10:23 . Reden: Updatet de jsfiddle ]

[Guillome]

Waarom geen SVG?

HTML:

<svg width="200" height:"50">
    <polygon points="5,15 5,35 170,35 180,25 170,15 5,15" style="fill:none;stroke:red;stroke-width:3"></polygon>
</svg>

[ Voor 87% gewijzigd door Guillome op 14-10-2015 16:09 ]

[DJMaze]

Guillome schreef op woensdag 14 oktober 2015 @ 16:04:
Waarom geen SVG?

Hierom:

posttoast schreef op dinsdag 13 oktober 2015 @ 17:20:
Natuurlijk kan ik hiervoor een (SVG) plaatje als achtergrond gebruiken, maar ik vind het veel fraaier om dit met puur CSS te doen.

[Guillome]

Oeps

[creator1988]

Kan je hiervoor niet CSS clipping gebruiken?

[R4gnax]

DJMaze schreef op woensdag 14 oktober 2015 @ 17:35:
Hierom:

posttoast schreef op dinsdag 13 oktober 2015 @ 17:20:
Natuurlijk kan ik hiervoor een (SVG) plaatje als achtergrond gebruiken, maar ik vind het veel fraaier om dit met puur CSS te doen.

Je kunt het sowieso niet met SVG doen. Als het SVG image niet exact uitgemeten is op de grootte v/d link of knop, dan zal het geschaald moeten worden. En onze grote vriend IE ondersteunt non-scaling strokes nog steeds niet. Dus dat zou aartslelijk worden.

[ Voor 3% gewijzigd door R4gnax op 15-10-2015 21:00 ]

[posttoast]

Dank voor al jullie meedenken

Maar... er zit nog geen winnaar tussen Het probleem is dat het pijltje uit het ontwerp niet gelijkbenig is, de punt is een flauwere hoek. Alle voorbeelden (ook die van cssarrowplease) hebben hoeken van 45 graden. Nu is het me uiteindelijk wel gelukt om er eentje te maken met een minder scherpe hoek, maar dat rendert direct heel kartelig en raar. Zou het überhaupt op deze manier kunnen?

[R4gnax]

posttoast schreef op donderdag 15 oktober 2015 @ 21:19:
Zou het überhaupt op deze manier kunnen?

Ja: http://jsfiddle.net/wh16qx4v/11/

[DJMaze]

R4gnax schreef op donderdag 15 oktober 2015 @ 21:49:
Ja: http://jsfiddle.net/wh16qx4v/11/

Tweakers is toch niet van de antwoorden, maar van de tips?
Ik gaf een transform hint en jij maakt m (bijna) af

[R4gnax]

DJMaze schreef op vrijdag 16 oktober 2015 @ 10:09:
[...]

Tweakers is toch niet van de antwoorden, maar van de tips?
Ik gaf een transform hint en jij maakt m (bijna) af

Klopt.

Het luistert helaas alleen nogal nauw om zoiets als dit helemaal werkend te krijgen wanneer je te maken hebt met hoeken anders dan 45 graden en borders dikker dan 1px. Dan moet je eigenlijk wel terugvallen op een compleet werkend voorbeeld.

[n8n]

R4gnax schreef op donderdag 15 oktober 2015 @ 21:00:
[...]


[...]


Je kunt het sowieso niet met SVG doen. Als het SVG image niet exact uitgemeten is op de grootte v/d link of knop, dan zal het geschaald moeten worden. En onze grote vriend IE ondersteunt non-scaling strokes nog steeds niet. Dus dat zou aartslelijk worden.

Svg is inline te manipuleren omdat het xml is, je moet dan wel de breedte uitmeten met JS en dit toepassen op de lengte van het pad in je svg. Iets meer moeite maar wel mooier afgewerkt.

Nog ff een css-poging gedaan, lijnt in Safari perfect uit wanneer er niet in- of uitgezoomd wordt. De ronde hoekjes maken dat het net lekkerder aan lijkt te sluiten. Het probleem met deze techniek is dat het resultaat nogal onderhevig is aan browser interpretatie en instellingen van tekstgrootte/zoomniveau.

http://jsfiddle.net/toL8mfdh/

[ Voor 25% gewijzigd door n8n op 16-10-2015 14:15 ]

[n8n]

http://jsfiddle.net/x8j1bLyj/ http://jsfiddle.net/x8j1bLyj/5/

Hier nogmaals met inline svg, kost vrijwel niks extra aan data. Om het aan de breedte aan te passen moet je de tweede waarde van het d-attribute wijzigen.

Edit: update gedaan met een simpele JS-functie die op basis van de breedte van het element de inline svg manipuleert en zo de breedte corrigeert. Dit werkt snel, is goed te onderhouden en heeft een beter resultaat dan hacken met css waarbij zoomen de opmaak vrijwel altijd breekt.

[ Voor 54% gewijzigd door n8n op 16-10-2015 17:14 ]

[Bosmonster]

Natuurlijk kan ik hiervoor een (SVG) plaatje als achtergrond gebruiken, maar ik vind het veel fraaier om dit met puur CSS te doen.

Volgens mij is het een stuk minder data om dit met een inline SVG op te lossen dan proberen het met een bak onleesbare (en bijna onbeheerbare) CSS te doen.

[n8n]

Bosmonster schreef op vrijdag 16 oktober 2015 @ 16:25:
[...]


Volgens mij is het een stuk minder data om dit met een inline SVG op te lossen dan proberen het met een bak onleesbare (en bijna onbeheerbare) CSS te doen.

Na ongeveer 3 knoppen wint de css oplossing het wanneer je naar mijn 2 jsFiddles kijkt. Css is in dit geval een hack, alleen omdat het kan, en zelfs dat niet goed. Svg is hier veel beter geschikt voor.

[DJMaze]

n8n schreef op vrijdag 16 oktober 2015 @ 17:10:
Svg is hier veel beter geschikt voor.

En... je SVG is bij deze stuk in firefox 41 op 1024 breedte http://jsfiddle.net/x8j1bLyj/8/

[n8n]

DJMaze schreef op vrijdag 16 oktober 2015 @ 17:24:
[...]

En... je SVG is bij deze stuk in firefox 41 op 1024 breedte http://jsfiddle.net/x8j1bLyj/8/

Kan gebeuren, ga dat niet cross browser testen, ligt waarschijnlijk aan de strict xml die svg vraagt. Neemt niet weg dat css in deze een hack is die meer glitches met zich mee brengt dan het waard is.

Edit, ah je hebt de JS weggehaald. Daarvoor is een noscript class op je html-tag.

[ Voor 9% gewijzigd door n8n op 16-10-2015 17:31 ]

[DJMaze]

Je moet het denk ik dan eerder zoeken in een combinatie. De CSS ::after dan met een SVG.

[_Thanatos_]

Waarom niet een border-image en een SVG? Dan kun je die :after evt weer ergens anders voor gebruiken (icoontje ofzo, gewoon future-proofing). En die SVG kan ook in "pure css" als je een data-uri gebruikt

Wat is trouwens de charme van "pure css"? Het gaat erom dat je de juiste tool voor de job gebruikt. SVG is goed in lijntjes tekenen, dus gebruik je SVG. Anders is dit hetzelfde argument als krampachtig proberen een piechart in css te maken (slecht idee, gebruik SVG).

En anders, wachten op corner-shape

[ Voor 67% gewijzigd door _Thanatos_ op 19-10-2015 18:33 ]