CSS3做小三角形

浏览数：24 / 时间：2015年06月09日

技术分享

上图是项目得到的图片，代码如下

1 <div class="welcome">
2 <span>管理员:8888</span>
3 您的登陆时间是:2015/3/17 21:31:39
4 </div>

代码非常简单直接，就是一个登陆信息的展示。

前面的小三角形是用CSS3做的。CSS代码如下：

 1 div.welcome:before {
 2     content:"";
 3     border-width: 10px 0 10px 20px;
 4     border-style:solid;
 5     border-color:transparent transparent transparent #00BB9C;
 6     height:0;
 7     width:0;
 8     display:block;
 9     position:absolute;
10     left:-30px;
11     top:0;
12 }

这里解释一下代码的意思，content可以包含空格的16进制编码如:content:"\00a0";

content在这里的作用是占位。

border-width属性来控制三角形的宽度和高度，注意这里右边的宽度为0。单位默认省略，可以投下懒。

技术分享

如图内容已经小的不能再小了，而边框却很大，这样一来就有了差不多如图的效果。PS：图片有点夸张

这里的右边框的宽为0则紫色部分去掉：

技术分享

又因为上下边框的宽度各为左边框的1/2，也就是说上下边框相加等于左边框的宽度。

技术分享

这样一个高等于宽的三角形就出来了。

然后又把上下边框的颜色设置为透明 transparent，隐藏了上下边框

至于定位什么的大家都懂的就不说了。

 

郑重声明：本站内容如果来自互联网及其他传播媒体，其版权均属原媒体及文章作者所有。转载目的在于传递更多信息及用于网络分享，并不代表本站赞同其观点和对其真实性负责，也不构成任何其他建议。

标签： class style 代码 log com src si it la class style 代码 log com src si it la

相关文章

随机文章

您可能还喜欢

您可能还喜欢