Question

通过我在网上找到的一些例子，我想出了一个＆＃34; up＆＃34; 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/。

Answer 1

向下箭头使用相同的向上箭头样式，并将其旋转180度：

＆＃13;

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

＆＃13;

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

＆＃13;

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（使用渐变）使箭头指向下方？

2 个答案: