本文是学习w3cplus上的一篇文章的心得体会,链接见底部。
具体实现的效果为：
1、样式一较为简单：
主要运用border-radius
2、样式二可拆分为一个矩形和一个三角形；
HTML为:
1 <h3 style="text-align:center;">Flag</h3> 2 <div class="flag"></div>
css为：
1 .flag{ 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 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 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 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 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