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

Упростите использование стрелки Юникод вместо создания.

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

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

Answer 2

Вам просто нужно внести два небольших изменения в ваш код:

1) удалить css для .arrow

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>

Answer 3

Вы можете использовать один элемент и градиент, тогда у вас не будет проблем с центрированием:

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

Поскольку ваша точка стрелки имеет ширину 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>

Answer 6

Дайте вашей строке ширину, которая нечетна.Вы использовали 2px на линии, и это привело к тому, что линия была немного смещена в одну сторону.Я сделал это 3px в качестве примера.

Или наоборот, сделайте вашу "точку" четным числом, что может иметь больше смысла, так как вы хотите, чтобы линии имели одинаковое значение 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>