首頁 > web前端 > css教學 > 主體

純css實現小箭頭或三角形標誌

王林
發布: 2021-03-11 11:16:51
轉載
2452 人瀏覽過

純css實現小箭頭或三角形標誌

身為前端工程師,工作中免不了要用css製作一些小箭頭、三角形之類的標誌。下面我就來為大家分享下純css製作小箭頭、三角形等標誌的方法。

實作小箭頭:

.arrow{
    width: 20px;
    height: 20px;
    margin-top: 50px;
    margin-left: 50px;
    border-top: 1px solid #000;
    border-left: 1px solid #000;
    transform: rotate(45deg);/*旋转角度*/
}
<div class="arrow"></div>
登入後複製

實作三角形:

.triangle{
    width: 0;
    height: 0;
    border-width: 100px;
    border-style: solid;
    border-color: red transparent transparent transparent;
    transform:rotate(45deg);
}
<div class="triangle"></div>
登入後複製

(免費影片教學:css影片教學

如何讓多個元素在一行顯示?

(1)display:inline把元素轉換為行內元素,但是寬高屬性不起作用

(2)display:inline-block可以讓元素在一行顯示,但他會受空格、換行鍵的影響,會有預設間距

解決方法:

1、去掉空格和換行鍵的影響讓標籤全都在一行(此方法不推薦,閱讀性不好)

2、給加了display:inline-block屬性的元素的父元素加一個屬性font-size:0

display:inline-block在ie6 7下不兼容的解决办法?
dispaly:inline;//css hack ie浏览器可以识别
zoom:1;//触发css hack的layout
登入後複製

3、利用浮動floa:left /right,但是需要清除浮動

相關推薦:CSS教學

#

以上是純css實現小箭頭或三角形標誌的詳細內容。更多資訊請關注PHP中文網其他相關文章!

相關標籤:
來源:cnblogs.com
本網站聲明
本文內容由網友自願投稿,版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容,請聯絡admin@php.cn
熱門教學
更多>
最新下載
更多>
網站特效
網站源碼
網站素材
前端模板
關於我們 免責聲明 Sitemap
PHP中文網:公益線上PHP培訓,幫助PHP學習者快速成長!