1

На CSS в макете, что первый, что второй блок сделан одним слоем:

две стрелки стрелка вниз

1 ответ 1

3

Я не понял, где возникли трудности у автора вопроса, поэтому нет смысла что-то объяснять. Лучше показать на примере:

/* Кнопка */
button {
  display: grid; place-items: center;
  height: 124px; width: 124px;
  border-radius: 8px;
  background-color: #daad2c;
}

/* Стрелка */
.arrow {
  --arrow-size: 16px;
  --arrow-color: #583b95;
  font: italic bold var(--arrow-size)/1em 'Comic Sans MS', sans-serif;
  /*line-height: 1em;*/
  position: relative; z-index: 0;
  display: grid; place-items: center;
  height: 1.5em; width: 5.4375em;
  padding: 0 0.625em 0 0;
  border-radius: 0.1875em 0 0 0.1875em;
  box-sizing: border-box;
  background-color: var(--arrow-color);
  background-clip: content-box;
}
.arrow::before,
.arrow::after {
  content: "";
  position: absolute;
  top: 50%; right: 0; z-index: -1;
  background-color: var(--arrow-color);
}
.arrow::before {
  padding: 1.15em;
  border-radius: 0.125em 0.25em;
  transform: translate(-0.33em, -50%) rotate(45deg);
  background: linear-gradient(45deg, #0000 50%, var(--arrow-color) 50%);
}
.arrow::after {
  padding: 1.6em 0.125em;
  border-radius: 0.125em;
  transform: translate(-1.375em, -50%);
}

/* Варианты направления */
.arrow[arrow-dir="left"]  { transform: rotate(.5turn);  }
.arrow[arrow-dir="down"]  { transform: rotate(.25turn); }
.arrow[arrow-dir="up"]    { transform: rotate(.75turn); }
.arrow[arrow-dir="right"] { transform: rotate(0turn);   }
.arrow[arrow-dir="spin"]  { animation: spin 2s ease infinite; }

/* Анимация вращения */
@keyframes spin { to { transform: rotate(1turn); } }

body { margin: 0; min-height: 100vh; background-color: black; display: flex; justify-content: space-around; align-items: center; }
<div class="arrow" arrow-dir="left" style="--arrow-size: 10px; --arrow-color: red;"></div>
<div class="arrow" arrow-dir="down" style="--arrow-size: 18px; --arrow-color: yellow;"></div>
<button><div class="arrow" arrow-dir="spin">GO!!!</div></button>
<div class="arrow" arrow-dir="up" style="--arrow-size: 4px; --arrow-color: green;"></div>
<div class="arrow" arrow-dir="right" style="--arrow-size: 36px; --arrow-color: blue;"></div>

Код самой стрелки может быть короче и содержать только один псевдоэлемент, если не нужны скруглённые углы. Большая часть остального кода лишь для примера и может быть сокращена под конкретные задачи.

Ваш ответ

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

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