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

В примере ниже, в первых двух строка, эмодзи уже стоят, в третьей и четвертой используются специально зарезервированные HTML символы. Поскольку как и эмодзи так и спецсимволы — текст, к ним можно применять стили.

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

Результат:

Как сделать на чистом css пульсирующий светящийся крест?

aliencash

css

Как задать универсальный @keyframes для нескольких разных блоков, без скриптов?

1 подписчик
2 часа назад
36 просмотров

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

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

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

крестик

Мне нужно воссоздать крестик ( вот такой ) при помощи 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: минусуют за лень и невежество. Не будет приложен код и/или описана конкретная проблема, то я тоже присоединюсь к минусующим.

angelpsy / style.css

Save angelpsy/4b8634815180bc57e767 to your computer and use it in GitHub Desktop.

Кнопка закрытия с крестиком на 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