CSS3做小三角形

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

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，隐藏了上下边框

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

 

转载于:https://www.cnblogs.com/manfredHu/p/4345651.html