Стрелка спидометра является блоком div, как у могу заузить ее в конце, чтобы она была как настоящая стрелка

Question

Стрелка спидометра является блоком div.

Как я могу заузить ее в конце, чтобы она была как настоящая стрелка?

@keyframes rotate {
    0% {
        -webkit-transform: rotate(360deg);
        -ms-transform: rotate(360deg);
        transform: rotate(50deg);
    }
    100% {
        -webkit-transform: rotate(360deg);
        -ms-transform: rotate(360deg);
        transform: rotate(310deg);
    }
}
.arrow {
    height: 45px;
    width: 4px;
    z-index: 3;
    background: #465972;
    border-radius: 2px;
    position: absolute;
    top: calc(50% - -35px);
    left: calc(50% - 1px);
    box-shadow: 1px 1px 2px #0000004d;
    animation: rotate 7s ease-in-out infinite alternate;
    transform-origin: top left;
}

Answer 1

Как вариант:

.arrow {
    width: 0;
    height: 0;
    border-top: 2px solid transparent;
    border-bottom: 2px solid transparent;
    border-right: 45px solid #465972;
    border-radius: 2px;
}

<div class="arrow"><div>

Answer 2

Увы, но сделать это в условиях div чуть сложнее, ибо это блочный элемент и он обычно всегда "с прямыми углами"..

Можно по извращаться и сделать что-то похожее использую transform: skew..

.speed-arrow {
  display: block;
  border-radius: 50% 50% 0 0;
  background: #333;
  width: 10px;
  height: 10px;
  position: relative;
  --skew: 2deg;
  margin-top: 95px;
}

.speed-arrow::before,
.speed-arrow::after {
  content: '';
  display: block;
  border-radius: 99px;
  width: 100%;
  height: 1000%;
  background: inherit;
  position: absolute;
  left: 50%;
  bottom: 0;
  transform-origin: center top;
}

.speed-arrow::before {
  transform: translateX(-50%) skewX(var(--skew));
}
.speed-arrow::after {
  transform: translateX(-50%) skewX(calc(var(--skew) * -1));
}

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

Но как по мне это колхоз..

Я бы советовал использовать SVG

.speedometer {
  display: block;
  width: 200px;
  height: 100px;
  border-radius: 999px 999px 0 0;
  background: #ccc;
  position: absolute;
}

.speedometer .arrow {
  display: block;
  position: absolute;
  left: 50%;
  bottom: 0;
  transform-origin: center calc(100% - 5px);
  animation: speed 6s ease-out infinite;
}

@keyframes speed {
  0%, 10%, 100% {transform: translateX(-50%) rotate(-90deg);}
  60%, 80% {transform: translateX(-50%) rotate(90deg);}
}

<div class="speedometer">
  <svg class="arrow" width="10" height="100" viewbox="0 0 10 100">
    <path d="M0 95A1 1 0 0010 95L7 2A1 1 0 003 2Z"/>
  </svg>
</div>

БЛОГ НА HUSL

Стрелка спидометра является блоком div, как у могу заузить ее в конце, чтобы она была как настоящая стрелка

Ответы (2 шт):