CSS怎样进行单一div的正多边形变换
发布时间:09/01 来源:未知 浏览:
关键词:
正三角形
正三角形不需要用到伪元素,只需要设置p自身的边框宽度即可发生,先来看一下正三角形的边长与中线,若边长为100px,则中线四舍五入就是87px(100 x sin(60)= 87)。
因而我们要将p的长宽都设为0,接着把底部border的宽度设为87px,摆布的border宽度设为50px(色彩设为透亮transparent),就可以做出一个标致的三角形。
width:0; height:0; border-width:0 50px 87px ; border-style:solid; border-color:transparent transparent #095;
正方形
正方形应当是最简略的,只有设置长宽设置为一样数值就可以了,不外其实还有别的两种办法,首先种你可以把长宽设为0,把高低摆布的border设为50px也可以,第二种则是高度设为0,宽度设为100px,然后某个边宽也设为100,都是可以的。
.a{ width:100px; height:100px; background:#c00; } .b{ width:0; height:0; border-width:50px; border-style:solid; border-color:#095; } .c{ width:100px; height:0; border-width:0 0 100px; border-style:solid; border-color:#069; }
理解道理之后,就可以应用伪元从来搭配制作啰!
.a{ position:relative; width:0; height:0; border-width:0 81px 59px; border-style:solid; border-color:transparent transparent #069; } .a:before{ position:absolute; content:""; top:59px; left:-81px; width:100px; height:0; background:none; border-width:95px 31px 0; border-style:solid; border-color:#069 transparent transparent; }
所以只有把正五边形的CSS稍作修改就可以做出正六边形了。
.a{ position:relative; width:100px; height:0; border-width:0 50px 87px; border-style:solid; border-color:transparent transparent #f80; } .a:before{ position:absolute; content:""; top:87px; left:-50px; width:100px; height:0; background:none; border-width:87px 50px 0; border-style:solid; border-color:#f80 transparent transparent; }
.a{ position:relative; width:0; height:0; border-width:0 90px 43px; border-style:solid; border-color:transparent transparent #09c; } .a:before{ position:absolute; content:""; top:140px; left:-112px; width:100px; height:0; border-width:78px 62px 0; border-style:solid; border-color:#09c transparent transparent; } .a:after{ position:absolute; content:""; top:43px; left:-112px; width:180px; height:0; border-width:0 22px 97px; background:none; border-style:solid; border-color:transparent transparent #09c; }
.a{ position:relative; width:100px; height:0; border-width:0 71px 71px; border-style:solid; border-color:transparent transparent #f69; } .a:before{ position:absolute; content:""; top:171px; left:-71px; width:100px; height:0; border-width:71px 71px 0; border-style:solid; border-color: #f69 transparent transparent; } .a:after{ position:absolute; content:""; top:71px; left:-71px; width:242px; height:0; border-width:0 0 100px; background:none; border-style:solid; border-color:transparent transparent #f69; }
相干教程:css视频教程
以上就是CSS 怎样进行单一div的正多边形变换的细致内容,更多请关注 百分百源码网 其它相干文章!