纯 CSS 绘制三角形

最新推荐文章于 2024-06-19 14:48:22 发布

MR_Teen

最新推荐文章于 2024-06-19 14:48:22 发布

阅读量529

点赞数

分类专栏： css/css hack 文章标签： css

本文链接：https://blog.youkuaiyun.com/dong123dddd/article/details/51957477

版权

css/css hack 专栏收录该内容

15 篇文章

订阅专栏

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

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

width="100%" height="300" src="//jsfiddle.net/8daav4cf/embedded/html,css,result/" allowfullscreen="allowfullscreen">

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;}