如何制作一个箭头指向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>