上图是项目得到的图片，代码如下
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:" 0a0";
content在这里的作用是占位。
border-width属性来控制三角形的宽度和高度，注意这里右边的宽度为0。单位默认省略，可以投下懒。
如图内容已经小的不能再小了，而边框却很大，这样一来就有了差不多如图的效果。PS：图片有点夸张
这里的右边框的宽为0则紫色部分去掉：
又因为上下边框的宽度各为左边框的1/2，也就是说上下边框相加等于左边框的宽度。
这样一个高等于宽的三角形就出来了。
然后又把上下边框的颜色设置为透明 transparent，隐藏了上下边框
至于定位什么的大家都懂的就不说了。