您好,登錄后才能下訂單哦!
這篇文章給大家分享的是有關怎么使用css實現特殊標志或圖形的內容。小編覺得挺實用的,因此分享給大家做個參考,一起跟隨小編過來看看吧。
1. 前言
由于圖片占的空間比較大,且圖片越多,越不好管理,所以有些時候,我們可以使用一些簡單的標簽樣式來實現簡單的圖形標志來替代圖片。
2. 實例展示:
三角形示例
示例代碼:
<style type="text/css"> .triangle b { border: 5px solid #fff; border-left: 5px solid #353535; margin: 0; font-size: 0; } </style>
方向箭頭示例
示例代碼:
<style type="text/css"> .mark b{border:solid #D0D0D0;width:6px;height:6px;display:inline-block;} .mark b.lmark{border-width:2px 2px 0 0;transform: rotate(45deg);} </style>
空缺圓
*{ padding:0; margin:0; } div:before{ content:""; width:20px; height:20px; position:absolute; top:-10px; left:40px; border-radius:50%; background-color:white; } div{ position:relative; width:100px; height:100px; margin:100px auto; box-shadow:0 0 2px red; background-color:#ccc; }
感謝各位的閱讀!關于“怎么使用css實現特殊標志或圖形”這篇文章就分享到這里了,希望以上內容可以對大家有一定的幫助,讓大家可以學到更多知識,如果覺得文章不錯,可以把它分享出去讓更多的人看到吧!
免責聲明:本站發布的內容(圖片、視頻和文字)以原創、轉載和分享為主,文章觀點不代表本網站立場,如果涉及侵權請聯系站長郵箱:is@yisu.com進行舉報,并提供相關證據,一經查實,將立刻刪除涉嫌侵權內容。