我有一个 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
最佳答案
您可以使用 :after
伪元素创建它,然后在顶部添加三 Angular 形。
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>
关于jquery - 向行或 div 添加箭头,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/39861754/