css實現三角箭頭

移動端經常遇到點擊下拉菜單

 

這個時候需要三角圖標

為了減少移動端的體積，我們使用樣式css來寫三角圖標

詳細代碼如下所示：

------------------------------------HTML-----------------------------------

<h4 class="arrow1">上箭頭</h4>
<h4 class="arrow2">下箭頭</h4>
<h5 class="triangle1">左實心三角</h5>
<h5 class="triangle2">右實心三角</h5>

 

-----------------------------------CSS-----------------------------------

/*各個部分樣式*/

@charset "utf-8";
.wrapper {
width: 100%;
height: 100%;
padding: 50px;
}

h4 {
width: 108px;
margin: 30px auto;
position: relative;
}

.arrow1:before {
position: absolute;
right: 20px;
top: 50%;
width: 12px;
height: 12px;
margin-top: -2px;
border-right: 1px solid #000;
border-bottom: 1px solid #000;
-webkit-transform: rotate(225deg);
content: '';
}

.arrow2:before {
position: absolute;
right: 20px;
top: 5px;
width: 12px;
height: 12px;
border-right: 1px solid #000;
border-bottom: 1px solid #000;
transform: rotate(45deg);
-webkit-transform: rotate(45deg);
content: '';
}

.triangle1 {
display:block;
width: 0;
height: 0;
overflow: hidden;
margin: 20px auto;
line-height: 0;
font-size: 0;
vertical-align: middle;
border-right: 10px solid red;
border-left: 0 none;
border-top: 10px solid transparent;
border-bottom: 10px solid transparent;
_color: #FF3FFF;
_filter: chroma(color=#FF3FFF);
}

.triangle2 {
display: block;
margin: 20px auto;
width: 0;
height: 0;
overflow: hidden;
line-height: 0;
font-size: 0;
vertical-align: middle;
border-left: 10px solid red;
border-right: 0 none;
border-top: 10px solid transparent;
border-bottom: 10px solid transparent;
_color: #FF3FFF;
_filter: chroma(color=#FF3FFF);
}

 

================================================

 下載鏈接地址：https://files.cnblogs.com/files/leshao/%E7%AE%AD%E5%A4%B4arrow.rar