箭頭用css3怎麼寫
- 藏色散人原創
- 2021-01-04 10:17:373861瀏覽
用css3寫箭頭的方法：先建立一個前端範例檔；然後利用CSS3中的transform屬性實作一個沒有背景填滿小正方形；最後透過設定它的邊框和翻轉即可實現箭頭效果。
本教學操作環境：Dell G3電腦、Windows7系統、HTML5&&CSS3版本。
推薦：《css影片教學》
箭頭用css3怎麼寫？
可以利用CSS3中的transform屬性，先實作一個沒有背景填滿小正方形，設定它的邊框、翻轉就可以實現箭頭了。
下面透過範例來看看：
<style>
.left{
width: 7px;
height: 7px;
border-top: 2px solid #ff0000;
border-right: 2px solid #ff0000;
transform: rotate(-135deg);
}
.right{
width: 7px;
height: 7px;
border-top: 2px solid #ff0000;
border-right: 2px solid #ff0000;
transform: rotate(45deg);
}
.top{
width: 7px;
height: 7px;
border-top: 2px solid #ff0000;
border-right: 2px solid #ff0000;
transform: rotate(-45deg);
}
.bottom{
width: 7px;
height: 7px;
border-top: 2px solid #ff0000;
border-right: 2px solid #ff0000;
transform: rotate(135deg);
}
</style>
</head>
<body>
<div class="left"></div>
<hr>
<div class="right"></div>
<hr>
<div class="top"></div>
<hr>
<div class="bottom"></div>
</body>效果圖：
以上是箭頭用css3怎麼寫的詳細內容。更多資訊請關注PHP中文網其他相關文章！
陳述：
本文內容由網友自願投稿，版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容，請聯絡admin@php.cn
上一篇：圖片之間的間隔css怎麼設定下一篇：圖片之間的間隔css怎麼設定