Как сверстать крестик css

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

Вопросы с просьбами помочь с отладкой («почему этот код не работает?») должны включать желаемое поведение, конкретную проблему или ошибку и минимальный код для её воспроизведения прямо в вопросе. Вопросы без явного описания проблемы бесполезны для остальных посетителей. См. Как создать минимальный, самодостаточный и воспроизводимый пример.

Закрыт 2 года назад .

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

Отслеживать
задан 8 фев 2021 в 11:24
61 1 1 золотой знак 1 1 серебряный знак 5 5 бронзовых знаков
Мы готовы рассмотреть ваши попытки и подсказать.
8 фев 2021 в 11:27

1. Заинтайнить svg в background. 2. Сделать 2 пересекающихся наклонных градиента, но углы получатся острыми. Можно дорезать через clip-path или ещё 2 или 4 градиента. 3. Сделать горизонтальный и вертикальный градиенты и повернуть с помощью transform. 4. Вместо градиентов использовать 2 псевдоэлемента. 5. Если фон однотонный, закрашивать не линии, а треугольники. Впрочем, я не вижу причин так делать.

8 фев 2021 в 11:31

@Qwertiy: минусуют за лень и невежество. Не будет приложен код и/или описана конкретная проблема, то я тоже присоединюсь к минусующим.

Как слелать крестик на прозрачном фоне в модалке?

Как сделать картинку на прозрачном фоне?
Добрый день, web-мастеры! Мне нужно сделать такую картинку, чтобы фона у нее не было. Допустим.

Корявые символы на прозрачном фоне.
Имеется форма, допустим, белого цвета. На форме установлен Label с прозрачным фоном. В свойстве.

Рисование на прозрачном фоне формы
Приветствую. Возникла проблема с рисованием на прозрачном фоне формы. Создал простую форму.

Текст метки на прозрачном фоне
Всем день добрый. Кто знает оптимальный способ, как сделать, чтобы текст в QLabel выводился на.

Регистрация: 15.02.2019
Сообщений: 514

В html вставляєш блок с хрестиком в блок с белым фоном, дальше в стилях прописываешь для блока с белым фоном position: relative, а для блока с хрестиком position: absolute
Дале с помощу значений top,left, right,bottom, позиционируеш блок с хрестиком если єлемент вылазит тогда можна указывать значения с минусом.

2622 / 1703 / 737
Регистрация: 13.03.2010
Сообщений: 5,697
AlexKOR5, и как это поможет сделать прозрачный фон под крестиком?
Регистрация: 15.02.2019
Сообщений: 514

Ну ТС спросил как сделать крестик на прозрачном фоне, а не как сделать прозрачный фон крестика.
Большинство модальных окон имею прозрачный второстепенный background собственно и куда и можно разместить крестик.

2622 / 1703 / 737
Регистрация: 13.03.2010
Сообщений: 5,697
AlexKOR5, приведите пример. Чтобы получилось 1 в 1 со скриншотом. Или максимально приближенно.

3106 / 2591 / 1219
Регистрация: 14.05.2014
Сообщений: 7,236
Записей в блоге: 1

Сообщение было отмечено Mailo как решение

Решение

Mailo, как вариант:

1 2 3 4 5 6 7 8 9 10 11 12 13

div class="modal-wrapper"> div class="modal-outer"> div class="modal-before"> div class="modal-close-btn">/div> /div> div class="modal"> h2 class="modal-title">Заголовок/h2> div class="modal-text"> Lorem ipsum dolor, sit amet consectetur adipisicing elit. Natus debitis eius qui, reprehenderit blanditiis tenetur incidunt possimus eaque expedita doloribus ab enim saepe adipisci vitae, officiis, labore accusamus. Esse, expedita. /div> /div> /div> /div>

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66

*, *:before, *:after { margin: 0; padding: 0; box-sizing: border-box; } .modal-wrapper { position: absolute; top: 0; right: 0; bottom: 0; left: 0; background-color: rgba(0,0,0,.5); } .modal-outer { position: absolute; width: 300px; height: 450px; left: 50%; top: 50%; transform: translate(-50%,-50%); padding: 5px 5px 0 0; } .modal-before { content: ""; display: block; background-color: #fff; left: 0; width: calc(100% - 30px); height: 30px; } .modal-close-btn { width: 30px; height: 30px; position: absolute; right: 0px; top: 0; background-color: #009afc; padding: 5px; } .modal-close-btn:before, .modal-close-btn:after { content: ""; display: block; position: absolute; width: 2px; height: 25px; background-color: #fff; bottom: 5px; } .modal-close-btn:before { left: 5px; transform-origin: right bottom; transform: rotate(45deg); } .modal-close-btn:after { right: 5px; transform-origin: left bottom; transform: rotate(-45deg); } .modal { height: calc(100% - 35px); background-color: #fff; padding: 10px 30px; position: absolute; text-align: center; right: 5px; bottom: 0; }

Навёрстывай!

Недавно на хабре спрашивали, как можно сделать крестик на css. Так вот, крестик можно сделать так.

Решение состоит в том, чтобы создать два прямоугольника и повернуть их на 45 градусов средствами css-transform. Для IE используется фильтр matrix.

.one  -webkit-transform: rotate(-45deg); -moz-transform: rotate(-45deg); -o-transform: rotate(-45deg); filter:progid:DXImageTransform.Microsoft.Matrix(M11='0.707', M12='0.707', M21='-0.707', M22='0.707', SizingMethod="auto expand"); >

.two  -webkit-transform: rotate(45deg); -moz-transform: rotate(45deg); -o-transform: rotate(45deg); filter: progid:DXImageTransform.Microsoft.Matrix(M11='0.707', M12='0.707', M21='-0.707', M22='0.707', SizingMethod="auto expand"); progid:DXImageTransform.Microsoft.BasicImage(rotation=3); >

 class="close--one ">❌  class="close--two">✖  class="close--three">&#x2715  class="close--three">✖  

.close--one  font-size: 20px; > .close--two  font-size: 30px; color: blueviolet; font-weight: 700; > .close--three  font-size: 30px; >