CSS

Question

我正在尝试用这样的线创建一个纯 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 箭头？

Answer 1

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

反之亦然，使您的 "point" 为偶数，这可能更有意义，因为您希望线条具有相同的 thicckness .

.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>

Answer 2

由于您的箭头点是 25px 宽，因此不会对齐。因为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>

Answer 3

.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>

随机改变之后的高度宽度

Answer 4

您可以使用一个元素和渐变，这样您就不会遇到居中问题：

.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>

Answer 5

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

1) 删除 .arrow

的 css

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

如果您愿意，可以删除 < div class='arrow' >

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

.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>

Answer 6

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

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

<div class="arrow">&#x2193;</div>

CSS - 箭头未对齐

CSS - Arrow not lining up

html

css-shapes