可以使用正方形的右底边框旋转45度实现

一般图片或者SVG格式方式去完成，这里我们尝试用css方式区做首先我们思考一下

        margin:100px ;
        height: 200px;
        width: 200px;
	border-bottom-right-radius:5px;
	border-bottom:6px solid red;
	border-right:6px solid red;
	box-sizing:border-box;
	-webkit-transform-origin:50% 50%; /* Safari and Chrome */
	transform:rotate(-45deg);

这是正常边框 微信图片_20220211164710.png

微信图片_20220211164719.png 这是旋转后的边框

还有一种是border方式实现

当我们把一个div高宽定义为0 ，border定义宽度我看看效果

        margin:100px ;
        height:0px;
        width: 0px;
        border:60px solid red;
        border-color:red green blue orange

微信图片_20220211165727.png

四个方向都是成为三角形，那么实心三角形，我么只需要定义一边就可以了，其他方向为透明 transparent 。border-color:red green blue orange;改为red transparent transparent transparent(方向是上右下左)

但是如何实现不是实心箭头怎么办我们可以通过叠加方式实现,通过position :absolute 进行绝对定位有部分是和背景颜色一致。

<title></title> 
<style>
#grad1 {
	position:absolute;
	top:10px;
	margin:100px ;
    height:0px;
    width: 0px;
	border:60px solid red;
	border-color:red transparent transparent transparent
}
	#grad2{
	position:absolute;
	margin:100px ;
	top:0px;
    height:0px;
    width: 0px;
	border:60px solid red;
	border-color:white transparent transparent transparent
}
#box{
	position:relative;
	}
</style>
</head>

<body>

<div id="box">
	<div id="grad1"></div>
	<div id="grad2"></div>
	</div>

</body>
</html>

css 各种箭头写法探究

可以使用正方形的右 底 边框 旋转45度 实现

还有一种是border方式实现

可以使用正方形的右底边框旋转45度实现