html - 如何使用 CSS(带渐变)使箭头指向下方？

Question

通过我在网上找到的一些例子，我想出了一个“向上”的 HTML 箭头使用

.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);
}

我的问题是，如何制作向下箭头？ 我的 fiddle 说明了这一点——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);
}