CSS--画三角形

最新推荐文章于 2018-06-19 16:02:46 发布

「已注销」

最新推荐文章于 2018-06-19 16:02:46 发布

阅读量365

点赞数

分类专栏： css

本文链接：https://blog.csdn.net/mpdemp/article/details/72627806

版权

css 专栏收录该内容

31 篇文章 1 订阅

订阅专栏

1、使用border

原理如下图的盒子模型，各个部分的位置分配。有理由相信，padding，border,margin都由四部分组成，也都可以用来画三角。但是为什么这里使用border呢？因为border可以可以单独设置很多样式，颜色呀，大小啊。

这里写图片描述
需要注意的是三角形箭头的方向与boder位置相反。
如画一个向上的箭头

width: 0;
height: 0;
border-left: 240px solid transparent;
border-left: 240px solid transparent;
boder-bottom: 120px solid yellow;

这里写图片描述

这里三角形的宽度是由两部分组成，一部分由border-left的宽度给撑开，一部分由border-right的宽度给撑开也就是这里的border-left: 240px solid transparent;,border-left: 240px solid transparent;.而三角形本身的高度由border-bottom的本身来决定，也就是boder-bottom: 120px solid yellow;。

需要说的是，transparent表示颜色rgba(0,0,0,0),也就是透明的黑色。

其他形状举一反三。