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设计图标也是要把块元素转化为行内块元素,
行内块元素的特点前面说过和普通汉字字符类似可以在一行排列,同时又具备宽高度边距等属性。
结论
使用外边框的三个边线可以完成任何边长三角形的的制作,自然也包括特殊的直角三角形和等腰、等边三角形,以后使用的时候直接复制、修改下面代码即可。