編碼的世界 / 優質文選 / 生涯
怎樣用css3設計出向上向下的小箭頭
2022年7月01日
-
效果圖：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style type="text/css">
.arrow-up {
display: inline-block;
vertical-align: top;
border-bottom: 4px solid #dd0000;
border-right: 4px solid transparent;
border-left: 4px solid transparent;
content: "";
margin-top: 5px;
}
.arrow-down {
display: inline-block;
vertical-align: top;
border-top: 4px solid #dd0000;
border-right: 4px solid transparent;
border-left: 4px solid transparent;
content: "";
margin-top: 5px;
}
.arrow-left {
display: inline-block;
vertical-align: top;
border-right: 4px solid #dd0000;
border-top: 4px solid transparent;
border-bottom: 4px solid transparent;
content: "";
margin-top: 5px;
}
.arrow-right {
display: inline-block;
vertical-align: top;
border-left: 4px solid #dd0000;
border-top: 4px solid transparent;
border-bottom: 4px solid transparent;
content: "";
margin-top: 5px;
}
</style>
</head>
<body>
<button>向上<span class="arrow-up"></span></button>
<button>向下<span class="arrow-down"></span></button>
<button>向左<span class="arrow-left"></span></button>
<button>向右<span class="arrow-right"></span></button>
</body>
</html>形成符號的元素不再是寬和高圍成的，而是通過border.
一個沒有內容的元素。如果你給它添加border-left和border-top並且設置成同樣顏色，它倆將圍成一個小方塊，對方塊奉獻的比重為1：1，
所以當你將其中的一個邊設置為透明色的時候，方塊按對角線剩下一半。
熱門文章
