用CSS编码绘图3角形 纯CSS绘图3角形的编码

2021-01-20 13:10 jianzhan
1、新建1个元素,随意甚么元素,但是我习惯性性的会用块元向来做。假如行内元素就display:block它。
<div class="triangle"></div>
2、把它的宽高设定为height:0px; width:0px;
3、设定边框border特性,用来完成3角形。
最先要掌握border实际是如何的,我写了1个这样的款式:
border:50px solid #000; border-color:#f00 #000 #f0f #00f;
在FF下面显示信息实际效果以下:

出現4个3角形合拼成1个正方形。到这里就很清楚了,要是把要想的保存,其它的设定为全透明便可以做到3角形的实际效果,那末:
border:50px solid #000; border-color:#f00 transparent transparent transparent;
在FF便可以看到1个鲜红色3角形以下:

可是IE呢,特别是坑爹的IE6会如何? 如图:

这是由于它不适用transparent,因此不容易全透明,那末能够这样:
border:50px solid #000; border-color:#f00 transparent transparent transparent; border-style:solid dashed dashed dashed;
在你想它全透明的地区对应的把border-style设定为dashed,IE6便可以做到跟FF1样的实际效果了。
那这样也就只是完成了4个方位的3角形,那假如要直角对着45斜线方位的呢?那末能够用两个正方位的3角形并在1起来完成,以下图:

编码:
border:50px solid #000; border-color:#f00 #000 transparent transparent; border-style:solid solid dashed dashed;
要是把色调统1,就产生1个45斜线方位3角形,而在IE6却会是这样1种显示信息:

这是由于IE6有个行高撑开了,把行高设定为0就跟FF1样了:line-height:0px;
最后演试:

提醒:您能够先改动一部分编码再运作