CSS绘制三角形和箭头，不用再用图片了

Javanx

发布于 2019-09-04 15:43:20

2.1K0

发布于 2019-09-04 15:43:20

文章被收录于专栏：web秀web秀

前言

还在用图片制作箭头，三角形，那就太lou了。css可以轻松搞定这一切，而且颜色大小想怎么变就怎么变，还不用担心失真等问题。先来看看这段代码:

/**css*/
.d1{
    width: 0; 
    height: 0; 
    border: 100px solid #339933;
}
/**html*/
<div class="d1"></div>

/**css*/
.d2{
    width: 0; 
    height: 0;
    border-width: 100px;
    border-style: solid;
    border-color:#FFCCCC  #0099CC  #996699  #339933;
}
/**html*/
<div class="d2"></div>

看了这两段代码，和效果图，是不是有一点眉目了？原来画三角形，只需要用元素的border来控制就可以了，border-with控制大小， border-style控制样式（实线、虚线等）， border-color控制颜色，分上、右、下、左

三角形示例

向下三角形

/**css*/
.d3{
    margin-left: 10px;
    float: left;
    width: 0; 
    height: 0;
    border-width: 100px;
    border-style: solid;
    border-color:#FFCCCC transparent transparent  transparent;
}
/**html*/
<div class="d3"></div>

向左三角形

/**css*/
.d4{
    margin-left: 110px;
    float: left;
    width: 0; 
    height: 0;
    border-width: 100px;
    border-style: solid;
    border-color: transparent #0099CC transparent transparent;
}
/**html*/
<div class="d4"></div>

这里的transparent是透明的意思接下来两种就留给聪明的你了，相信你可以的，动手才知道原来这么简单！其实我们还可以通过，一种样式，来实现不能角度的三角形，那就是利用CSS3里面的旋转transform:rotate(90deg)。

/**css*/
.d4{
    margin-left: 110px;
    float: left;
    width: 0; 
    height: 0;
    border-width: 100px;
    border-style: solid;
    border-color: transparent #0099CC transparent transparent;
    transform: rotate(90deg); /*顺时针旋转90°*/
}
/**html*/
<div class="d4"></div>

箭头示例

向左箭头

/**css*/
.left:before,.left:after{
    position: absolute;
    content: '';
    border-top: 10px transparent dashed;
    border-left: 10px transparent dashed;
    border-bottom: 10px transparent dashed;
    border-right: 10px #fff solid;
}
.left:before{
    border-right: 10px #0099CC solid;
}
.left:after{
    left: 1px; /*覆盖并错开1px*/
    border-right: 10px #fff solid;
}
/**html*/
<i class="left" ></div>

是不是发现箭头和三角形是一样的呢？发现了，说明你已经懂了，箭头其实就是2个三角形，然后用白色三角形覆盖蓝色三角形，并且错开1px，刚刚好就形成了箭头。这就和《最强大脑》层叠消融项目是一样的。

向上箭头

/**css*/
.top:before,.top:after{
    position: absolute;
    content: '';
    border-top: 10px transparent dashed;
    border-left: 10px transparent dashed;
    border-right: 10px transparent dashed;
    border-bottom: 10px #fff solid;
}
.top:before{
    border-bottom: 10px #0099CC solid;
}
.top:after{
    top: 1px; /*覆盖并错开1px*/
    border-bottom: 10px #fff solid;
}
/**html*/
<i class="top" ></div>

通过上面两个例子，我想剩余两个方向的箭头，你应该可以搞定了，就是不能，那就会一种就好了，然后通过transform:rotate(90deg)，来旋转角度，还是能搞定各个方向的箭头。

公告

以后每月5、15、25号更新原创文章，内容不限，喜欢小编的可以点击关注，也可在下方评论留言，你喜欢什么内容，小编根据大家喜欢的内容尝试更新

本文参与腾讯云自媒体分享计划，分享自作者个人站点/博客。

原始发表：2018年9月10日，如有侵权请联系 cloudcommunity@tencent.com 删除

css

本文分享自作者个人站点/博客前往查看

如有侵权，请联系 cloudcommunity@tencent.com 删除。

本文参与腾讯云自媒体分享计划，欢迎热爱写作的你一起参与！

css

登录后参与评论

0 条评论

热度