css3标签页学习制作

本文是学习w3cplus上的一篇文章的心得体会,链接见底部。

具体实现的效果为：

1、样式一较为简单：

主要运用border-radius

2、样式二可拆分为一个矩形和一个三角形；

HTML为:

1 <h3 style="text-align:center;">Flag</h3>
2 <div class="flag"></div>

css为：

 1 .flag{width: 110px;
 2   height: 156px;
 3   padding-top: 15px;
 4   position: relative;
 5   background: red;
 6   margin:0 auto;
 7     }
 8 .flag:after{ /*  一个长方形+一个朝上的三角形 */
 9 content: "";
10   position: absolute;
11   left: 0;
12   bottom: 0;
13   width: 0;
14   height: 0;
15   border-bottom: 23px solid #fff;
16   border-left: 55px solid transparent;
17   border-right: 55px solid transparent;    }

效果为：

那样式二就较为简单了：

具体见代码，HTML为：

1 <div class="demo tag2">
2     <p>我有一只小毛驴 我从来也不骑 有一天我心血来潮 骑着去赶集 我手里拿着小皮鞭 我心里正得意 不知怎么哗拉拉拉 我摔了一身泥我有一只小毛驴 我从来也不骑 有一天我心血来潮 骑着去赶集 我手里拿着小皮鞭 我心里正得意 不知怎么哗拉拉拉 我摔了一身泥</p>
3     <div class="demo2"><a>what</a><a>are you</a><a>saying</a></div>
4 </div>

css为：

 1 /* demo2 */
 2 .demo2{ left:-73px; top:10px;}
 3 .demo2 a{
 4     background-color:#03AEC7;
 5     color:#fff;
 6     text-shadow:0 -1px 0 rgba(0,0,0,.2);
 7     position:relative;
 8     display:block;
 9     margin:0 0 10px;
10     -webkit-box-shadow:-5px 0 5px -5px rgba(0, 0, 0, 0.3) inset;
11     -moz-box-shadow:-5px 0 5px -5px rgba(0, 0, 0, 0.3) inset;
12     box-shadow:-5px 0 5px -5px rgba(0, 0, 0, 0.3) inset;
13
14     }
15 .demo2 a:before{
16     content:‘‘;
17     width:0;
18     height:0;
19     position:absolute;
20     left:-10px;
21     top:0;
22     border-left:10px solid transparent;
23     border-top:12px solid #03AEC7;
24     border-bottom:12px solid #03AEC7;
25
26     }

3、样式三可拆解为一个矩形+一个三角形+一个小圆；

三角形的实现前面已经说过了，小圆就是运用border-radius=边长即可；

HTML为：

1 <div class="demo tag3">
2     <p>我有一只小毛驴 我从来也不骑 有一天我心血来潮 骑着去赶集 我手里拿着小皮鞭 我心里正得意 不知怎么哗拉拉拉 我摔了一身泥我有一只小毛驴 我从来也不骑 有一天我心血来潮 骑着去赶集 我手里拿着小皮鞭 我心里正得意 不知怎么哗拉拉拉 我摔了一身泥</p>
3     <div class="demo3"><a>what</a><a>are you</a><a>saying</a></div>
4 </div>

css为：

 1 /* demo3 */
 2 .demo3 a{
 3     background-color:#F89406;
 4     color:#fff;
 5     text-shadow:0 -1px 0 rgba(0,0,0,.2);
 6     position:relative;
 7
 8     }
 9 .demo3 a:before{
10     content:‘‘;
11     width:0;
12     height:0;
13     border-right:10px solid #F89406;
14     border-top:12px solid transparent;
15     border-bottom:12px solid transparent;
16     position:absolute;
17     left:-10px;
18     top:0;
19
20     }
21 .demo3 a:after{
22      content:‘‘;
23      width:4px;
24      height:4px;
25      border-radius:4px;
26      position:absolute;
27      left:-4px;
28      background:#fff;
29      top:10px;
30
31
32
33
34     }

大功告成，呱唧呱唧.

w3cplus  demo链接为：http://www.w3cplus.com/demo/384.html