纯 CSS 绘制三角形

来源：互联网发布：linux怎么安装qq 编辑：程序博客网时间：2024/05/02 12:02

简单的css三角图形绘制功能

左右箭头的定位和大小需要注意，其他的都是正常使用border来处理的。结果如下所示：

html 源码

<div class="mycontain">  <span class="arrow-left"></span>&nbsp;&nbsp;  <span class="arrow-right"></span>&nbsp;&nbsp;  <span class="arrow-up"></span>&nbsp;&nbsp;  <span class="arrow-down"></span>&nbsp;&nbsp;  <span class="arrow-topleft"></span>&nbsp;&nbsp;  <span class="arrow-topright"></span>&nbsp;&nbsp;  <span class="arrow-bottomleft"></span>&nbsp;&nbsp;  <span class="arrow-bottomright"></span>&nbsp;&nbsp;  <span class="arrow"></span></div>

css源码

.mycontain{margin:50px auto;position:relative;}.mycontain span{width:0px;height:0px;overflow:hidden;}.arrow-up{border-left:10px solid transparent;border-right:10px solid transparent;border-bottom:10px solid #008;}.arrow-down{border-left:10px solid transparent;border-right:10px solid transparent;border-top:10px solid #008;}.mycontain .arrow-left{border-top:10px solid transparent;border-bottom:10px solid transparent;border-right:10px solid #008;border-left:10px solid transparent;display:block;position:absolute;top:0px;left:50px;}.arrow-right{border-top:10px solid transparent;border-bottom:10px solid transparent;border-left:10px solid #008;border-right:10px solid transparent;display:block;position:absolute;top:0px;left:40px;}.arrow-topleft{border-top:10px solid #008;border-right:10px solid transparent;}.arrow-topright{border-top:10px solid #008;border-left:10px solid transparent;}.arrow-bottomleft{border-bottom:10px solid #008;border-right:10px solid transparent;}.arrow-bottomright{border-bottom:10px solid #008;border-left:10px solid transparent;}.arrow{border-top:10px solid #c00;border-right:10px solid #0c0;border-bottom:10px solid #00c;border-left:10px solid #666;position:absolute;top:0px;left:10px;}

0 0