Ich habe ein DreieckHinzufügen Grenze zu CSS Dreieck
<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;
}
Wie ich die Umrisse eines CSS Dreieck zeichnen sie, wenn man bedenkt border selbst verwendet wird, um das Dreieck zu machen? Externe Divs?
Ein Weg, dies zu tun, ist die Schaffung eines inneren Dreiecks, das kleiner ist.
.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>Dies ist, wie ich es tun würde.
.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>Hier ist es auf JSFiddle.
Machen Sie ein weiteres Dreieck, das rot und ein Pixel breiter ist und legen Sie dann das weiße Dreieck darüber und Sie haben ein weißes Dreieck mit einem roten Rand. – frenchie
Verwenden Sie die in [diese Antwort hier] beschriebene Dreieckstechnik (http://stackoverflow.com/a/24808936/2930477). – misterManSam