Можно это реализовать на чистом css?

Question

[olya_097]

или тут только иконкой

Comments

[Rustam Bainazarov]

Ну можно, тут одни примитивы. Только зачем — непонятно. Вы уже столько верстаете, а вопросы всё те же, почему бы не попробовать самому?

[olya_097]

Рустам Байназаров, может Вы и правы
всмысле зачем? чтобы не грузить иконку. Или в чем вопрос?

[Rustam Bainazarov]

olya_097, такая иконка в SVG будет весить меньше килобайта. Зато не будет проблем с масштабированием и встраиванием.

Answer 1

[0xD34F]

<div class="icon"></div>

.icon {
  font-size: 60px;
  display: inline-block;
  border: 0.1em solid black;
  border-radius: 0.5em;
  width: 1em;
  height: 2em;
  position: relative;
}

.icon::before {
  content: "";
  display: inline-block;
  position: absolute;
  width: 0.2em;
  height: 0.2em;
  background: black;
  left: 50%;
  top: 30%;
  transform: translateX(-50%);
  box-shadow: 0 -0.4em black, 0 0.4em black;
}

.icon::after {
  content: "";
  display: inline-block;
  border: 0.15em solid black;
  border-left: 0;
  border-top: 0;
  width: 0.4em;
  height: 0.4em;
  position: absolute;
  top: 60%;
  left: 50%;
  transform: translateX(-50%) rotate(45deg);
}

https://jsfiddle.net/udygv7xr/

Answer 2

[Алий Кунашев]

Можно. Скруглённые углы, точки. Стрелка - trsnsform блока с бордером с двух сторон.

Answer 3

[html-css]

spanЫ внутри spanА с абсолютным позиционированием