Создание крестика в 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: минусуют за лень и невежество. Не будет приложен код и/или описана конкретная проблема, то я тоже присоединюсь к минусующим.
Как сделать крестик в css
В примере ниже, в первых двух строка, эмодзи уже стоят, в третьей и четвертой используются специально зарезервированные HTML символы. Поскольку как и эмодзи так и спецсимволы — текст, к ним можно применять стили.
class="close--one ">❌ class="close--two">✖ class="close--three">✕ class="close--three">✖ .close--one font-size: 20px; > .close--two font-size: 30px; color: blueviolet; font-weight: 700; > .close--three font-size: 30px; > 
Результат:
Как слелать крестик на прозрачном фоне в модалке?
Как сделать картинку на прозрачном фоне?
Добрый день, web-мастеры! Мне нужно сделать такую картинку, чтобы фона у нее не было. Допустим.
Корявые символы на прозрачном фоне.
Имеется форма, допустим, белого цвета. На форме установлен Label с прозрачным фоном. В свойстве.
Рисование на прозрачном фоне формы
Приветствую. Возникла проблема с рисованием на прозрачном фоне формы. Создал простую форму.
Текст метки на прозрачном фоне
Всем день добрый. Кто знает оптимальный способ, как сделать, чтобы текст в QLabel выводился на.
Регистрация: 15.02.2019
Сообщений: 514
В html вставляєш блок с хрестиком в блок с белым фоном, дальше в стилях прописываешь для блока с белым фоном position: relative, а для блока с хрестиком position: absolute
Дале с помощу значений top,left, right,bottom, позиционируеш блок с хрестиком если єлемент вылазит тогда можна указывать значения с минусом.
2586 / 1677 / 732
Регистрация: 13.03.2010
Сообщений: 5,634
AlexKOR5, и как это поможет сделать прозрачный фон под крестиком?
Регистрация: 15.02.2019
Сообщений: 514
Ну ТС спросил как сделать крестик на прозрачном фоне, а не как сделать прозрачный фон крестика.
Большинство модальных окон имею прозрачный второстепенный background собственно и куда и можно разместить крестик.
2586 / 1677 / 732
Регистрация: 13.03.2010
Сообщений: 5,634
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; }
angelpsy / style.css
Clone via HTTPS Clone with Git or checkout with SVN using the repository’s web address.
Learn more about clone URLs
Кнопка закрытия с крестиком на css
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters. Learn more about bidirectional Unicode characters
| . close |
| position : absolute; |
| top : 5 px ; |
| right : 5 px ; |
| width : 55 px ; |
| height : 55 px ; |
| cursor : pointer; |
| border : 4 px solid # e62f57 ; |
| border-radius : 50 % ; |
| > |
| . close : before , |
| . close : after |
| content : «» ; |
| position : absolute; |
| top : 21 px ; |
| left : 10 px ; |
| width : 26 px ; |
| height : 4 px ; |
| background : # e62f57 ; |
| > |
| . close : before |
| webkit-transform : rotate ( 45 deg ); |
| transform : rotate ( 45 deg ); |
| > |
| . close : after |
| webkit-transform : rotate ( -45 deg ); |
| transform : rotate ( -45 deg ); |
| > |
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment