同學們,當美工給的設計圖是這樣:
或者這樣:
我的內心其實是拒絕的-_-;但工作還得干,大部分同學會寫
<style> .icon{width:20px;height:20px;display:block;margin:0 auto;background:url(...)} </style> <div class="con"> <div class="icon"></div> <span>添加會計</span> </div>
或者干脆利落
<style> .icon img{...} </style> <div class="con"> <div class="icon"><img src="..."></div> <span>添加會計</span> </div>
這樣做是可以解決問題的,但是為了這個一個小小的小尖尖,我們還要大費周章的去切(很少同學能享受到美工給制作的sprite圖片),如果遇到的設計圖不是分層的或者設計軟件都不熟的話是很郁悶的...
其實有一種簡單的方法可以搞定這種小尖尖,大家請看:
<style> .con2{height: 50px;line-height: 50px;text-align: center;background:#ccecec;position: relative;} .con2 i{border: 10px solid #ccecec; border-color: transparent transparent #ccecec transparent;position: absolute; top: -20px;left: 139px; } </style> <div class="con"> <i></i> <span>添加會計</span> </div>
這就涉及到border的問題,如果一個元素的寬度設為0,border-width卻為大於0的數,結果是會出現一個正方形(每個邊會成為一個等邊直角三角形),如果設置border-color為上右下左不同的四種顏色,結果就會出現一個由四個等邊三角形構成的正方形!
<style> .test{width:0;border:50px solid ;border-color: #333 #ff0000 #ccecec #999} </style> <div class="test"></div>
這樣大家不難想到,如果把某三個邊的顏色設為透明,我們就能得到一個任意顏色的三角形了。
<style> .test{width:0;border:50px solid ;border-color: transparent transparent #ccecec transparent} </style> <div class="test"></div>
然后我們將這個元素,例如<i>標簽,設置定位為相對定位,調整其top和left的值,即可輕易得到一個用css寫的小尖尖。
至於這個有邊框的尖尖,我給大家說一下思路:在上面實現的三角中放入一個類似的元素,我們稱之為子三角,父三角的border-color設置為下面div的邊框顏色,子三角的border-color設置為div的背景顏色,子三角定位(注意調整子三角位置,使其恰好露出父三角1px的邊),然后調整父三角的位置,OK大功告成!
如果知道的兄台就當是看個戲,不是很熟練的同學可以自己多練練。希望多多批評指正!