css實現--三角形/箭頭（上下左右）--詳細原理
阿新 • • 發佈：2021-01-28
純css實現上下左右箭頭
**一直以為箭頭知識引入的icon標籤，直到實習才知道原來純CSS是都可以實現的**
實現效果在這裡插入程式碼片
<style> #rightRow{ height: 20px; width: 20px; border-right: 5px solid black; border-top: 5px solid black; padding:3px; transform: rotate(-135deg); } </style> </head> <body> <div id="rightRow"></div> </body>
- 設定箭頭粗細、顏色、大小程式碼
border-right: 5px solid black;
border-top: 5px solid black;
//設定邊框的大小值就可以得到不同粗細的箭頭，5px->10px
//設定padding屬性可以將箭頭變大變小，3px->5px
- 配合transform：rotate旋轉元素，得到不同方向箭頭
transform: rotate(-135deg);
//一個引數“角度”，單位deg，正數為順時針旋轉，上述逆時針旋轉得到左箭頭
//deg=45,將會得到右箭頭
- 擴充套件：transform具有其他屬性
transform:scale(0.5);
transform:scale(0.5,2);
//引數表示縮放倍數：
*一個引數：表示水平和垂直同時縮放該倍數
*兩個引數：第一個引數指定水平方向，第二個指定垂直方向
transform:skew(30deg);
transform:skew(30deg,30deg);
//引數表示傾斜角度，單位deg，也是類似上述縮放（水平+垂直）
- 感謝觀看！實現三角形見下篇