Как сделать крестик в 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; > 
Результат:
angelpsy / style.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 ); |
| > |
Создание крестика в 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
@lavezzi1 Что подразумевается под «не вешается»? has-close нужно явно задать в BEMJSON и не забыть добавить его в deps.js
8 years ago
@tadatuta после явного указания в BEMJSON ‘has-close’ : true заработало. В депс добавил, как вы писали выше. Правда, вот такая картина получается:
@tadatuta Еще вопрос образовался, у меня есть компонент notification, который работает по тому же принципу что и модально окное, единственное что нужно — чтобы окно было зафиксировано. Как добавить паралельно к боди свойство overflow: hidden, пока так сделал $(‘body’).css(‘overflow’ , ‘hidden’); но выглядит это не правильно как то в контексте i-bem js.
8 years ago
По скриншоту похоже на то, что в шаблоне вместо
block('modal').mod('has-close', true).elem('content').content()(function() block('modal').mod('has-close', true).content()(function() 8 years ago
Как добавить паралельно к боди свойство overflow: hidden
this.findBlockOutside('page').setMod('fixed'); Но если я правильно понимаю задачу, то notification вполне может быть «синглтоном» — существовать в единственном экземпляре на странице и переиспользоваться с разным контентом. Тогда можно просто заранее смиксовать его с page и overflow: hidden прописать для самого notification . А второй частью разбитого по DOM-дереву блока notification будет элемент, содержащий modal .