如何製作一個箭頭指向CSS（漸變）？

Question

通過一些例子我在網上找到，我想通了，做一個「向上」使用

.arrow:after { 
    height: 100px; 
    width: 100px; 
    display: block; 
    content: ''; 
} 

.upArrow:after { 
    background: linear-gradient(60deg, transparent 63%, #fff 63%), linear-gradient(-60deg, transparent 63%, #fff 63%), linear-gradient(to bottom, #ccc, #000); 
} 

我quesiton是，如何讓我的向下箭頭，箭頭HTML？ 我的小提琴說明這是 - https://jsfiddle.net/hsfm42mb/。

Answer 1

讓你的向下箭頭的CSS是

.downArrow:after { 
    background: linear-gradient(120deg, transparent 63%, #fff 63%), 
    linear-gradient(-120deg, transparent 63%, #fff 63%), 
    linear-gradient(to top, #ccc, #000); 
} 

Answer 2

使用相同的樣式的向上箭頭向下箭頭，並旋轉180度：

.arrow:after { 
 
    height: 100px; 
 
    width: 100px; 
 
    display: block; 
 
    content: ''; 
 
} 
 

 
.upArrow:after, .downArrow:after { 
 
    background: linear-gradient(60deg, transparent 63%, #fff 63%), linear-gradient(-60deg, transparent 63%, #fff 63%), linear-gradient(to bottom, #ccc, #000); 
 
} 
 

 
.downArrow:after { 
 
    transform: rotate(180deg); 
 
}

<div id="upArrow" class="upArrow arrow"></div> 
 
<br /> 
 
<div id="downArrow" class="downArrow arrow"></div>