將箭頭添加到行或格

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>