cssを使用して境界線の三角形を作るには？

Question

ボーダートライアングルの作成方法は？

私は、これは三角形

.triangle { 
     width: 0; 
     height: 0; 
     border-left: 15px solid transparent; 
     border-right: 15px solid transparent; 
     border-bottom: 20px solid #8e8e8e; 
    } 

を作ることである。しかし、これは固体の三角形で、三角形が伸びるようにそれが見えるようにする方法があることを確認するために考えることができる唯一のこと境界線

Answer 1

絶対にあなたのdivの下部に位置:afterまたは:before要素を作成します。

.box { 
 
    position: relative; 
 
    background-color: #F00; 
 
    border: 1px solid #000; 
 
    width: 50px; 
 
    height: 50px; 
 
} 
 

 
.box:after { 
 
    content: ""; 
 
    width: 16px; 
 
    height: 16px; 
 
    position: absolute; 
 
    background-color: #FFF; 
 
    bottom: -8px; /* half of the elements width/height */ 
 
    left: 50%; 
 
    transform: translateX(-50%) rotate(45deg); 
 
    border-bottom: 1px solid #000; 
 
    border-right: 1px solid #000; 
 
}

<div class="box">

あなたはそれの内部で何が起こっているかを見ることができるように、私は:after要素の白を作りました。

Answer 2

三角要素をサブレイアウト下に移動する必要があります。 ボーダーデザインのために三角形を追加しました。

.balon { 
 
    width: 350px; 
 
    height: 120px; 
 
    border: 5px solid #2C6DBF; 
 
    margin: 50px auto; 
 
    position: relative; 
 
    border-radius: 8px; 
 
} 
 
.balon::after, .balon::before { 
 
    width: 0; 
 
    height: 0; 
 
    content: ''; 
 
    border-left: 15px solid transparent; 
 
    border-right: 15px solid transparent; 
 
    border-top: 21px solid #fff; 
 
    position: absolute; 
 
    bottom: -19px; 
 
    right: 0; 
 
    left: 0; 
 
    margin: auto; 
 
} 
 
.balon::before { 
 
    border-left-width: 20px; 
 
    border-right-width: 20px; 
 
    border-top-width: 25px; 
 
    border-top-color: #2C6DBF; 
 
    bottom: -25px; 
 
}

<div class="balon"> 
 
    
 
</div>