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为例。

反之亦然，将“点”设为偶数，这可能更有意义，因为您希望这些行具有相同的thic c kness。

.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

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

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

由于箭头的宽度为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 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>

工作后随机更改高度宽度

Answer 5

您只需要对代码做两个小改动：

1）删除.arrow的CSS

2）对于.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>

答案 5 :(得分：0)

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

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

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

Answer 6

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

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

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

CSS-箭头未对齐

6 个答案: