CSS绘制三角形border法 cssborder教程分享( 二 ) _经验知识

文章插图
必须定位地区
对于黄色三角形。由于设置了left: 0和top: 0 。所以黄色三角形的任何内容（包括border、margin）将根据蓝色三角形的上顶点进行定位。可以把此时此刻left: 0和top: 0分别就这样看作是两面“隔墙”——即上隔墙和左隔墙。黄色三角形的任何内容就只能在上隔墙的下方和左隔墙的右方地区。
由于黄色三角形的内容地区也位置在于其顶点处。且对其设置了差不多各40px的border 。所以黄色三角形的内容地区将向右偏移40px 。从而形成了以前的效果。
想想就这样看将黄色三角形的地点设置为left: 0和bottom: 0,会获得什么样的定位效果？（下图所示）

文章插图
黄色三角形设置为left: 0和bottom: 0
搞懂了必须定位后。只要在原代码上稍作改写就可以将黄色三角形的顶点与蓝色三角形顶点相重合。同一时间还大概适当缩小黄色三角形的尺寸（按差不多三角形等比例缩小）：
#blue:after {content: "&#34position: absolute;top: 0px;left: -38px;border-width: 0 38px 38px;border-style: solid;border-color: transparent transparent yellow;}获得：

文章插图
黄色三角形与蓝色三角形顶点重合
在上面的代码中。专门删除了以前对width: 0和height: 0的设置。因为子元素有着position:absolute设置。这会使得元素尺寸在不显式设置宽度和高度的状态下。收缩到元素内容的尺寸。由于内容设置的是content: "" 。所以子元素的尺寸默认也就是0了。故设置width: 0和height: 0就变得多余了。
末尾一步就是使用top将黄色三角形向下移动至适合的地点：
#blue:after {content: "&#34position: absolute;top: 1px;left: -38px;border-width: 0 38px 38px;border-style: solid;border-color: transparent transparent yellow;}获得最终效果：

文章插图
最终效果
学会了带边框三角形的绘制。那么实现类似如下三角形箭头大自然也是不在话下了：

文章插图
三角形箭头
实现代码：
#blue:after {content: "&#34position: absolute;top: 2px;left: -38px;border-width: 0 38px 38px;border-style: solid;border-color: transparent transparent #fff;}3. 绘制其它角度的三角形绘制其它角度的三角形。如：

文章插图
code:.mate::before{content: '&#39width: 0;height: 0px;border-bottom: 32px solid blue;border-right: 20px solid transparent;position: absolute;top: 0px;left: 0px;}下图：.mate::before{content: '&#39width: 0;height: 0px;border-top: 32px solid #d72ce8;border-right: 20px solid transparent;position: absolute;top: -1px;left: -3px;}