Конечно, можно просто запилить svg и вес небольшой и цвет менять можно, но это же скучно!
Содержание:
- svg
- Крестик span:before
- Background
- Clip-path
- Спецсимволы
- Кодировка iso
- +
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">✖</div>
или
<div class="close">×</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>
Всем спасибо за внимание!
