如何用CSS（带渐变）制作一个向下的箭头？答案

【问题标题】：How to make an arrow pointing down with CSS (with gradient)?如何用CSS（带渐变）制作一个向下的箭头？
【发布时间】：2018-08-17 05:36:02
【问题描述】：

通过我在网上找到的一些示例，我想出了一个“向上”的 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);
}

我的问题是，我如何制作向下箭头？我的小提琴在这里说明了这一点——https://jsfiddle.net/hsfm42mb/。

【问题讨论】：

标签： html css gradient css-shapes

【解决方案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);
}

【讨论】：

【解决方案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>

【讨论】：