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

反之亦然，让你的“点”是偶数，这可能更有意义，因为你想要的行具有相同的 THICÇ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;

如果愿意，可以删除<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>