css实现弯曲箭头

前些天写项目，设计图里有弯曲的箭头，当时由于时间紧迫，使用的是图片，现在闲下来，自己再画一个，如下：

实现完全箭头分两部分：

• 在div内实现直角三角形，旋转调整角度（也可在整理完成再旋转）
• 使用伪元素实现弯曲部分效果，进行旋转

以上知识点基本都是围绕border属性

<div class="curvedArrowUp"></div>
<div class="curvedArrowDw"></div>

最简单的直角三角形：

.curvedArrowUp {
	width: 0;
	height: 0;
	border-top: 9px solid greenyellow;
	border-left: 9px solid transparent;
}

设置宽和高为0，上下左右 选择相邻的两条，设置高度和颜色，就可以画出直角三角形

实现弯曲部分：

.curvedArrowUp {
    width: 10px;
    height: 10px;
    border: 1px solid red;
    border-radius: 0px 0px 0px 10px;
    border-bottom: 3px solid greenyellow;
    /* border-left: 3px solid greenyellow; */
}

在实现这一部分时，使用 border 和 border-radius 先画一个扇形，再设置圆弧对应的一条边（假如左下角设置成扇形，设置border-bottom或border-left的属性来控制弯曲部分的头尾），最后把 border 属性删除或隐藏，就能实现 div 的弯曲效果

剩下部分就是整合两部分的内容，无非就是修改位置，就不累赘了，以下是完整的样式

.curvedArrowUp{
	position: relative;
	width: 0;
	height: 0;
	display: inline-block;
	border-top: 9px solid greenyellow;
	border-left: 9px solid transparent;
    transform: rotate(-15deg);
}
.curvedArrowUp:after{
	position: absolute;
	content: '';
	border: 0px solid transparent;
	border-bottom: 3px solid greenyellow;
  	border-radius: 0px 0 0 20px;
	top: -13px;
  	left: -18px;
	width: 12px;
	height: 12px;
	transform: rotate(-45deg);
}
.curvedArrowDw{
	position: relative;
	width: 0;
	height: 0;
	display: inline-block;
	border-top: 9px solid transparent;
	border-right: 9px solid red;
    transform: rotate(15deg);
}
.curvedArrowDw:after{
	position: absolute;
	content: '';
	border: 0 solid transparent;
	border-right: 3px solid red;
	border-radius: 0 20px 0 0;
	top: -10px;
  	left: -11px;
	width: 12px;
	height: 12px;
	transform: rotate(-45deg);
}