我们可以使用css绘制三角形来制作箭头。
一、绘制三角
HTML代码：
<div class="container"></div>
css代码：
.container{
width: 0;
height: 0;
border: 50px solid;
border-color: red yellow green blue;}利用border绘制了四个三角组成的矩形，现在要绘制三角形，只需要让其他任意三个三角形变为透明即可。
修改代码：
border-color: red transparent transparent transparent;
效果图：
二、绘制箭头
利用三角绘制箭头，只需要再绘制一个和此三角大小相同，方向相同的三角，颜色和背景颜色一样，覆盖在此三角上面，通过少量的位移形成箭头。
css样式：
.container{
width: 0;
height: 0;
border: 50px solid;
border-color: red transparent transparent transparent;
position: relative;}.container::after{
content: '';
position: absolute;
top: -55px;
left: -50px;
border: 50px solid;
border-color: white transparent transparent transparent;}效果图：
以上就是css怎么绘制箭头？的详细内容，更多请关注易知道|edz.cc其它相关文章！
