css实现小三角(原理)
发布时间:2016-03-17 17:00:21
效果图如图1所示:(简单示范,有点丑,莫介意)PS:兼容IE,FF , chrome ,360安全浏览器先讲下原理吧,如图2所示:这个div的样式如下所示:div{ width: 0px; height: 0px; border-width: 20px; border-s ...
效果图如
图1所示:(简单示范,有点丑,莫介意)
先讲下原理吧,如
图2所示:
解释:当
div的宽高为0时,设border的宽度并设颜色,会发现div像是被分割为4个小三角形,对应的CSS代码: 解释:④最后多加了两句css hack:
*width: 40px; *height: 40px;左三角:border-style: dashed solid dashed dashed;border-color: transparent pink transparent transparent;
右三角:border-style: dashed dashed dashed solid;border-color: transparent transparent transparent lightblue;
最后,给出效果图1的代码:
原标题:css实现小三角(原理)
关键词:CSS
*特别声明:以上内容来自于网络收集,著作权属原作者所有,如有侵权,请联系我们:
admin#shaoqun.com
(#换成@)。