after僞元素實現空心三角箭頭

時間 2019-11-18

標籤元素實現空心三角箭頭简体版

原文原文鏈接

例子：html

代碼：web

<!DOCTYPE html>
<html lang="zh-CN">
<head>
   <meta charset="UTF-8">
   <title>Document</title>
   <style>
   *{
       margin: 0;
       padding: 0;
   }
   .arrowUp:after {
   content: '';
   display: inline-block;
   width: 8px;
   height: 8px;
   border-top: 1px solid #656565;
   border-right: 1px solid #656565;
   transform: rotate(-45deg); /*旋轉角度*/
   -webkit-transform: rotate(-45deg);
   }
   </style>
</head>
<body>
   <span class="arrowUp"></span>
</body>
</html>spa

Transform字面上就是變形，改變的意思。
在CSS3中transform主要包括如下幾種：旋轉rotate、扭曲skew、縮放scale和移動translate以及矩陣變形matrix。感興趣的同窗自行研究,這裏很少加闡述。 orm

原理就是用after僞元素畫了一個矩形，只描繪了上邊框和右邊框，這樣就造成了一個箭頭的形狀，而後再用transform屬性調整角度實現不一樣的朝向。htm

參考借鑑他人it

相關標籤/搜索