css绘制向左三角形_CSS绘制三角形

1.绘制一个外边框

.div{width:200px;height:200px;background-color:#8fbfff;border:50px solid black;/*定义外边框*/}

2.重定义外边框样式

当外边框有了宽度，不知大家是否想一个问题，相邻的线条边界在哪，下面通过把外边框相邻侧边设置不同颜色来观察

/*使用下面的语句替换上面的border定义*/

border-bottom:50px solid#555555;border-top:50px solid#555555;border-right:50px solid#333333;border-left:50px solid#333333;

观察显示结果可以看出，对角线是两个边框线条的分界点

3.元素尺寸更改为0

试想一下，如果元素的宽高度无限接近于零，边框的显示效果梯形是否越接近于三角形，

把div元素的宽度、高度设置为0，可以看到如下效果，每个边框侧边设置对应一个三角形，这时候你应该有绘制三角形的基本思路了，把一部分边框侧边颜色设置为透明，就可以呈现出一个三角形效果

width:0px;height:0px;

4.三个边设置透明

前面讲解过颜色值除了十六进制表示，也可以使用rgb格式表示，rgba是CSS3新增标准，

透明颜色可以表示为rgba(0,0,0,0),第四个参数a设为0全透明即可，其它三个参数无所谓，

这样书写麻烦，可以使用关键词transparent来代替。

border-top宽度设为0

查看上面的三角形可以看到，虽然其他三个三角形影藏掉了，但是仍然占用位置，可以把底部border-bottom对面的顶部边线border-top宽度设置为0，boder的宽度默认就是0，设置为0就意味着不定义即可，效果如下

测试

赋予边框不同的宽度(顺序：top——right——left)

25——25——25 50——25——25  25——25——50  25——50——50

注意

块元素默认的宽度是100%，必须写width:0px不能像边框宽度为0的时候可以不写，不过如果你把块元素转化为行内块元素就不存在这个问题，一般使用CSS设计图标也是要把块元素转化为行内块元素，

行内块元素的特点前面说过和普通汉字字符类似可以在一行排列，同时又具备宽高度边距等属性。

结论

使用外边框的三个边线可以完成任何边长三角形的的制作，自然也包括特殊的直角三角形和等腰、等边三角形，以后使用的时候直接复制、修改下面代码即可。