如何使用 CSS（带渐变）使箭头指向下方？

Question

通过我在网上找到的一些示例，我想出了使用

制作 "up" 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

向下箭头使用向上箭头相同的样式，并将其旋转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>

Answer 2

使您的向下箭头 css 成为

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

如何使用 CSS（带渐变）使箭头指向下方？

How to make an arrow pointing down with CSS (with gradient)?

html

css

gradient

css-shapes