当前位置：首页 > news >正文

css实现长尾箭头（夹角小于45度的）

news 2025/7/4 13:16:16

1. 长尾夹角小于45度的箭头

在这里插入图片描述

代码

//h5<div class="singleArrow"></div>//css
.singleArrow {width: 150px;height: 1px;position: relative;background-color: #15ff00;/* transform: rotate(-40deg); */  /* 旋转角度 */}.singleArrow::after{ // 成品-有夹角content: '';display: block;position: absolute;width: 10px;height: 10px;right: 0px;  /* 箭头位置 */top: -4px;  /* 箭头位置 */border-top: 1px solid #15ff00;border-right: 1px solid #15ff00;transform: rotateZ(20deg) skew(332deg, 16deg);}```

2. 长尾夹角45度的箭头

在这里插入图片描述

	<div class="singleArrow"></div>//css.singleArrow {width: 150px;height: 1px;position: relative;background-color: #15ff00;/* transform: rotate(-40deg); */  /* 旋转角度 */}.singleArrow::after{ // 成品1-直角content: '';display: block;position: absolute;width: 10px;height: 10px;right: -3px;  /* 箭头位置 */top: -4px;  /* 箭头位置 */border-top: 1px solid #15ff00;border-right: 1px solid #15ff00;transform:  rotate(45deg)}

3. 长尾实心箭头

在这里插入图片描述

<div class="singleArrow"></div>//css.singleArrow {width: 150px;height: 8px;position: relative;background-color: #15ff00;/* transform: rotate(-40deg); */  /* 旋转角度 */}.singleArrow::after{ // 实心箭头content: '';display: block;position: absolute;// width: 10px;// height: 10px;right: -20px;  /* 箭头位置 */top: -6px;  /* 箭头位置 */border-top: 10px solid transparent;border-bottom: 10px solid transparent;border-left: 30px solid #00b9f7;// transform:  rotate(45deg)}```