還在為小三角形切圖?使用純CSS寫一個簡單的三角形


  同學們,當美工給的設計圖是這樣:

  或者這樣:

  我的內心其實是拒絕的-_-;但工作還得干,大部分同學會寫

<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大功告成!

  如果知道的兄台就當是看個戲,不是很熟練的同學可以自己多練練。希望多多批評指正!

 

 


免責聲明!

本站轉載的文章為個人學習借鑒使用,本站對版權不負任何法律責任。如果侵犯了您的隱私權益,請聯系本站郵箱yoyou2525@163.com刪除。



 
粵ICP備18138465號   © 2018-2025 CODEPRJ.COM