ho un triangoloAggiunta di confine triangolo CSS
<div class="triangle-left"></div>
.triangle-left {
width: 0;
height: 0;
border-top: 22px solid transparent;
border-bottom: 22px solid transparent;
border-right: 22px solid white;
}
Come faccio a disegnare il contorno di un triangolo CSS, considerando border si è usato per fare il triangolo? Div esterni?
Un modo per farlo è creare un triangolo interno che sia più piccolo.
.triangle-left {
width: 0;
height: 0;
border-top: 23px solid transparent;
border-bottom: 23px solid transparent;
border-right: 23px solid red;
}
.inner-triangle {
position: relative;
top: -20px;
left: 2px;
width: 0;
height: 0;
border-top: 20px solid transparent;
border-bottom: 20px solid transparent;
border-right: 20px solid blue;
}<div class="triangle-left">
<div class="inner-triangle"></div>
</div>Questo è come io lo farei.
.triangle-left {
width: 0;
height: 0;
border-top: 22px solid transparent;
border-bottom: 22px solid transparent;
border-right: 22px solid black;
position: relative;
}
.triangle-left:after {
content: '';
width: 0;
height: 0;
border-top: 21px solid transparent;
border-bottom: 21px solid transparent;
border-right: 21px solid #dddddd;
position: absolute;
top: -21px;
left: 1px;
}<div class="triangle-left"></div>Qui si è in JSFiddle.
Crea un altro triangolo più rosso e più largo di un pixel, quindi posiziona il triangolo bianco e hai un triangolo bianco con un bordo rosso. – frenchie
Usa la tecnica del triangolo descritta in [questa risposta qui] (http://stackoverflow.com/a/24808936/2930477). – misterManSam