CSS - 箭头不对齐答案

【问题标题】：CSS - Arrow not lining upCSS - 箭头不对齐
【发布时间】：2018-10-20 20:08:54
【问题描述】：

我正在尝试用这样的线创建一个纯 CSS 箭头...

.arrow {
	position:absolute;
	left:50%;
}

.arrow_line {
	width:2px;
	background:darkblue;
  height:60px;
	margin:auto;
}

.arrow_point {
	box-sizing: border-box;
	height: 25px;
	width: 25px;
	border-style: solid;
	border-color: darkblue;
	border-width: 0px 2px 2px 0px;
	transform: rotate(45deg);
	transition: border-width 150ms ease-in-out;
	margin-top: -24px;
}

<div class="arrow">
  <div class="arrow_line"></div>
  <div class="arrow_point"></div>
</div>

垂直线似乎永远不会与箭头垂直对齐，我在示例中将其略微漂移以更好地证明它没有相对于箭头居中。

有没有更好的方法来创建 CSS 箭头？

【问题讨论】：

为什么不使用 unicode 箭头？ ↓
为什么你认为你可以将偶数居中？由于这条线只有 2px 宽，你永远不会让它与“点”的尖端完美对齐。

标签： html css css-shapes

【解决方案1】：

您可以使用一个元素和渐变，那么您将不会遇到居中问题：

.arrow {
  width:80px;
  height:80px;
  background:
    linear-gradient(blue,blue) bottom right/40px 4px,
    linear-gradient(blue,blue) bottom right/4px 40px,
    linear-gradient(
    to top right,
    transparent calc(50% - 2px),
    blue        calc(50% - 2px),
    blue        calc(50% + 2px),
    transparent calc(50% + 2px));
  background-repeat:no-repeat;
  transform:rotate(45deg);
  margin:20px;
}

<div class="arrow">
</div>

您还可以轻松调整大小：

.arrow {
  width:var(--s,80px);
  height:var(--s,80px);
  background:
    linear-gradient(blue,blue) bottom right/calc(var(--s,80px)/2) calc(var(--t,2px)*2),
    linear-gradient(blue,blue) bottom right/calc(var(--t,2px)*2) calc(var(--s,80px)/2),
    linear-gradient(
    to top right,
    transparent calc(50% - var(--t,2px)),
    blue        calc(50% - var(--t,2px)),
    blue        calc(50% + var(--t,2px)),
    transparent calc(50% + var(--t,2px)));
  background-repeat:no-repeat;
  transform:rotate(45deg);
  margin:20px;
  display:inline-block;
}

<div class="arrow">
</div>

<div class="arrow" style="--t:3px;--s:60px">
</div>

<div class="arrow" style="--t:1px;--s:40px">
</div>

<div class="arrow" style="--t:2px;--s:20px">
</div>

<div class="arrow" style="--t:1px;--s:20px">
</div>

【讨论】：

当我放大时，它看起来仍然偏离中心，但可能只是我的眼睛！
@fightstarr20 这取决于你会放大多少:)

【解决方案2】：

给你的线一个奇数的宽度。您在线路上使用了2px，这导致线路稍微偏向一侧。我以3px 为例。

反之亦然，将“点”设为偶数，这可能更有意义，因为您希望线条具有相同的ckness。

.arrow {
	position:absolute;
	left:50%;
}

.arrow_line {
	width:2px;
  //width: 3px;
	background:darkblue;
  height:60px;
	margin:auto;
}

.arrow_point {
	box-sizing: border-box;
	height: 26px;
  //height: 25px;
	width: 26px;
  //width: 25px;
	border-style: solid;
	border-color: darkblue;
	border-width: 0px 2px 2px 0px;
	transform: rotate(45deg);
	transition: border-width 150ms ease-in-out;
	margin-top: -24px;
}

<div class="arrow">
  <div class="arrow_line"></div>
  <div class="arrow_point"></div>
</div>

【讨论】：

但是线条有不同的粗细。调整.arrow_point的高度/宽度会更好
是的，我看到了您的评论@Turnip 并将其编辑为答案。谢谢你的评论
@TemaniAfif 好吧，但我真的很想向你致敬，因为一旦我看到你的名字，就会有一个非常好的答案，而且有许多其他人没有使用过的方法。
谢谢 :) 但是投票系统或 cmets 应该足够了 ;) 我们应该避免在答案中出现噪音。对于老问题，我会同意你的看法，因为有时好的答案来晚了，而且在最底层。

【解决方案3】：

由于您的箭头点是 25 像素宽，因此它不会对齐。因为25不是偶数。将其更改为如下所示的 24 或任何其他偶数。

.arrow {
	position:absolute;
	left:50%;
}

.arrow_line {
	width:2px;
	background:darkblue;
  height:60px;
	margin:auto;
}

.arrow_point {
	box-sizing: border-box;
	height: 24px;
	width: 24px;
	border-style: solid;
	border-color: darkblue;
	border-width: 0px 2px 2px 0px;
	transform: rotate(45deg);
	transition: border-width 150ms ease-in-out;
	margin-top: -24px;
}

<div class="arrow">
  <div class="arrow_line"></div>
  <div class="arrow_point"></div>
</div>

【讨论】：

【解决方案4】：

.arrow {
	position:relative;
	height:30px;
  width:2px;
  background:red;
}

.arrow:after{
position: absolute;
    content: '';
    height: 10px;
    width: 10px;
    transform: rotate(45deg) translateX(-65%);
    border: 2px solid red;
    border-top: none;
    border-left: none;
    bottom: -20%;
    left: 50%;

}

<div class="arrow">

</div>

工作后随机改变高度宽度

【讨论】：

【解决方案5】：

通过使用 unicode 箭头而不是创建它来简化它。

.arrow{
  color:red;
  font-size:70px;
}

&lt;div class="arrow"&gt;&amp;#x2193;&lt;/div&gt;

【讨论】：

【解决方案6】：

您只需要对代码进行两处小改动：

1) 删除 .arrow 的 css

2) for .arrow_point 将 margin-top 更改为 margin:-24px auto;

如果你想你可以删除

简单的解决方案是最好的！

.arrow {
	/*position:absolute;
	left:50%;*/
}

.arrow_line {
	width:2px;
	background:darkblue;
  height:60px;
	margin:auto;
}

.arrow_point {
	box-sizing: border-box;
	height: 25px;
	width: 25px;
	border-style: solid;
	border-color: darkblue;
	border-width: 0px 2px 2px 0px;
	transform: rotate(45deg);
	transition: border-width 150ms ease-in-out;
	/*margin-top: -24px;*/
  margin:-24px auto;
}

<div class="arrow">
  <div class="arrow_line"></div>
  <div class="arrow_point"></div>
</div>

【讨论】：