-1

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

10
  • 4
    Мы готовы рассмотреть ваши попытки и подсказать.
    – UModeL
    8 фев 2021 в 11:27
  • 3
    1. Заинтайнить svg в background. 2. Сделать 2 пересекающихся наклонных градиента, но углы получатся острыми. Можно дорезать через clip-path или ещё 2 или 4 градиента. 3. Сделать горизонтальный и вертикальный градиенты и повернуть с помощью transform. 4. Вместо градиентов использовать 2 псевдоэлемента. 5. Если фон однотонный, закрашивать не линии, а треугольники. Впрочем, я не вижу причин так делать.
    – Qwertiy
    8 фев 2021 в 11:31
  • 1
    @Qwertiy: минусуют за лень и невежество. Не будет приложен код и/или описана конкретная проблема, то я тоже присоединюсь к минусующим.
    – UModeL
    8 фев 2021 в 11:35
  • 2
    @UModeL, всё вполне конкретно описано. Код не нужен.
    – Qwertiy
    8 фев 2021 в 11:36
  • 1
    @andreymal, "крестик" написано вполне текстом. И вопросы-картинки вообще-то не запрещены.
    – Qwertiy
    8 фев 2021 в 11:40

3 ответа 3

11

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

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>

6

Через 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>

1
  • 1
    @Sevastopol', прошу прощения, спасибо))
    – De.Minov
    8 фев 2021 в 11:57
4

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

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

2
  • хочеться рыдать...где cursor:pointer? (PS: Ответ интересный ;)
    – GGO
    8 фев 2021 в 14:49
  • @GGO блин, оказывается в комментах предлагали такое решение ( 8 фев 2021 в 14:54

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