7 способов нарисовать крестик закрытия на чистом css

Конечно, можно просто запилить svg и вес небольшой и цвет менять можно, но это же скучно!

Содержание:

• svg
• Крестик span:before
• Background
• Clip-path
• Спецсимволы
• Кодировка iso
• +

7 способов нарисовать крестик на чистом css

1. Вариант с svg.

Можно менять цвет, поворачивать

<svg viewPort="0 0 12 12" version="1.1" xmlns="http://www.w3.org/2000/svg">

<line x1="1" y1="11"

x2="11" y2="1"

stroke="black"

stroke-width="2"/>

<line x1="1" y1="1"

x2="11" y2="11"

stroke="#000000"

stroke-width="2"/>

</svg>

2. С помощью псевдоклассов.

По мне, самый устаревший способ.

<div class="close"></div>

<style>

.close:before, .close:after {

content: "";

position: absolute;

width: 24px;

height: 4px;

background: #000000;

}

.close:before {

transform: rotate(45deg);

}

.close:before {

transform: rotate(-45deg);

}

</style>

3. С помощью background

Задаем фон с помощью градиента.

<div class="close"></div>

<style>

.close{

width: 24px;

height: 24px;

border-radius: 100px;

background:

linear-gradient(45deg, transparent calc(50% - 3px), #000000 calc(50% - 3px), #000000 calc(50% + 3px), transparent calc(50% + 3px)),

linear-gradient(-45deg, transparent calc(50% - 3px), #000000 calc(50% - 3px), #000000 calc(50% + 3px), transparent calc(50% + 3px));

}

</style>

4. С помощью clip-path

Необходимо задать ширину, высоту и цвет крестика с помощью background.

<div class="close"></div>

<style>

.close{

width: 24px;

height: 24px;

-webkit-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%);

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

background: #000000;

}

</style>

5. Используя спецсимвол.

Размер и жирность регулируется font-size и font-weight

<div class="close">&#10006;</div>

или

<div class="close">&times;</div>

<style>

.close {

color: #000000;

font-size: 24px;

}

</style>

6. Используя кодировку ISO.

Размер, цвет и жирность регулируется font-size, background и font-weight

<div class="close"></div>

<style>

.close:after{

content: "\00d7";

}

</style>

7. Используя символ + на клавиатуре.

Необходимо просто повернуть его на 45 градусов.

<div class="close">+</div>

<style>

.close{

font-size: 24px;

transform: rotate(45deg);

}

</style>

Всем спасибо за внимание!