詳解CSS3 用border寫 空心三角箭頭 (兩種寫法)
發(fā)布時間：2017-09-29 16:26:20 作者：Bing 
我要評論
我要評論本篇文章主要介紹了CSS3 用border寫 空心三角箭頭 (兩種寫法)，非常具有實用價值，需要的朋友可以參考下
之前一直在尋找這種空心三角箭頭, 終于知道了原理! 自己記錄一下,順便分享給之前跟我一樣想要的擼友們~
第一種寫法 利用常見的 after偽元素
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style type="text/css">
.arrow {
width: 20px;
height: 4px;
margin: 0 auto 7px;
border-left: 4px solid transparent;
border-right: 4px solid transparent;
border-bottom: 4px solid #343c99;
transform: rotate(45deg);
transform-origin: left;
}
.arrow:after {
content: '';
display: block;
width: 100%;
height: 100%;
border-left: 4px solid transparent;
border-right: 4px solid transparent;
border-top: 4px solid #343c99;
position: absolute;
right: -10px;
top: -14px;
transform: rotate(90deg);
transform-origin: bottom;
}
</style>
</head>
<body>
<div class="arrow"></div>
</body>
</html>
第二種寫法相對于比較簡單
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style type="text/css">
/*簡單*/
.wb_arrow{
border-right: 2px solid #343c99;
border-top: 2px solid #343c99;
height: 10px;
width: 10px;
margin:50px auto 0;
transform: rotate(deg);
-webkit-transform: rotate(0deg);
/*不加這兩個屬性三角會比上一個略丑, 大家可以試一下*/
border-left: 2px solid transparent;
border-bottom: 2px solid transparent;
}
</style>
</head>
<body>
<div class="wb_arrow"></div>
</body>
</html>
以上就是本文的全部內(nèi)容，希望對大家的學習有所幫助，也希望大家多多支持腳本之家。
相關(guān)文章
web開發(fā)中，三角形指示箭頭最為常見，本文就來介紹了CSS實現(xiàn)空心尖角的示例代碼，具有一定的參考價值，感興趣的可以了解一下2023-11-22