矢印を行またはdivに追加する

Question

divがあり、矢印として使用しています。私はdivを生成することができましたが、その上部に矢印を付ける必要があります。

div { 
 
    width: 5px; 
 
    height: 220px; 
 
    background-color: red; 
 
    /* Rotate div */ 
 
    -ms-transform: rotate(30deg); 
 
    /* IE 9 */ 
 
    -webkit-transform: rotate(30deg); 
 
    /* Chrome, Safari, Opera */ 
 
    transform: rotate(30deg); 
 
    transform-origin: bottom left; 
 
}

<div>

jsfiddle

https://jsfiddle.net/4j8n45zz/4/

Answer 1

あなたは:after擬似要素でこれを作成して、ちょうど一番上に三角形を追加することができます。

div { 
 
    width: 5px; 
 
    height: 220px; 
 
    background-color: red; 
 
    /* Rotate div */ 
 
    -ms-transform: rotate(30deg); 
 
    /* IE 9 */ 
 
    -webkit-transform: rotate(30deg); 
 
    /* Chrome, Safari, Opera */ 
 
    transform: rotate(30deg); 
 
    transform-origin: bottom left; 
 
    position: relative; 
 
} 
 
div:after { 
 
    content: ''; 
 
    position: absolute; 
 
    top: 0; 
 
    left: 0; 
 
    border-style: solid; 
 
    transform: translate(-40%, -50%); 
 
    border-width: 0 10px 20px 10px; 
 
    border-color: transparent transparent red transparent; 
 
}

<div></div>