Создание крестика в CSS

Question

Мне нужно воссоздать крестик ( вот такой ) при помощи css

Answer 1

Сложный вопрос ⇒ непростой ответ:

div {cursor: pointer; position: absolute; top: 20px; left: 10px;}
div:before, div:after {content: ""; position: absolute; width: 24px; height: 4px; background: gray;}
div:before {transform: rotate(45deg);}
div:after {transform: rotate(-45deg);}

<div></div>

Answer 2

Через background и linear-gradient

.close {
  display: block;
  width: 30px;
  height: 30px;
  --weight: 3px;
  --aa: 1px; /* anti-aliasing */
  --color: red;
  border-radius: 3px;
  background:
    linear-gradient(45deg, transparent calc(50% - var(--weight) - var(--aa)), var(--color) calc(50% - var(--weight)), var(--color) calc(50% + var(--weight)), transparent calc(50% + var(--weight) + var(--aa))),
    linear-gradient(-45deg, transparent calc(50% - var(--weight) - var(--aa)), var(--color) calc(50% - var(--weight)), var(--color) calc(50% + var(--weight)), transparent calc(50% + var(--weight) + var(--aa)));
}

<div class="close"></div>

Answer 3

Можно я тоже? )

.close {
  width: 1em;
  height: 1em;
  background-color: red;
  clip-path: polygon(20% 0%, 0% 20%, 30% 50%, 0% 80%, 20% 100%, 50% 70%, 80% 100%, 100% 80%, 70% 50%, 100% 20%, 80% 0%, 50% 30%);
}

<div class="close"></div>

БЛОГ НА HUSL

Создание крестика в CSS

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