2

введите сюда описание изображения

Стрелка спидометра является блоком 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;
}
4
  • 1
    код в студию уважаемый.
    – 1001001
    13 апр 2022 в 10:54
  • @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; }
    – user495044
    13 апр 2022 в 10:55
  • используйте кнопку - править - для дополнения вашего вопроса.
    – 1001001
    13 апр 2022 в 11:00
  • @tomato-magnet-regulato автор уже забил на этот вопрос, а жаль, интерестный вопрос
    – Miha
    13 апр 2022 в 13:08

2 ответа 2

1

Увы, но сделать это в условиях 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>

1
  • + за svg мне нрав ^^ :*
    – 1001001
    19 апр 2022 в 11:40
0

Как вариант:

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

Ваш ответ

By clicking “Отправить ответ”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.