css繪製小箭頭和三角形
阿新 • • 發佈:2019-01-11
在前端日常工作中,會有一些需要用純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>
-
讓多個元素在一行顯示
(1)display:inline把元素轉化為行內元素,但是寬高屬性不起作用
(2)display:inline-block可以讓元素在一行顯示,但是他會受空格、換行鍵的影響,會有預設間距
=>解決辦法:
1.去掉空格和換行鍵的影響 讓標籤全都在一行(這種方法不推薦,閱讀性不好)
2.給加了display:inline-block屬性的元素的父元素加一個屬性font-size:0display:inline-block在ie6 7下不相容的解決辦法?
dispaly:inline;//css hack ie瀏覽器可以識別
zoom:1;//觸發css hack的layout(3)利用浮動floa:left/right,但是需要清浮動