Как нарисовать знак "х" с помощью svg и css?
2 ответа
@mona_terry
Вы можете нарисовать знак "х" с помощью SVG и CSS, используя элемент <path> для контура.
Вот пример кода:
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 |
<!DOCTYPE html>
<html>
<head>
<style>
.x-sign {
width: 100px;
height: 100px;
display: inline-block;
}
.x-sign path {
fill: none;
stroke: black;
stroke-width: 2px;
}
</style>
</head>
<body>
<svg class="x-sign" viewBox="0 0 100 100">
<path d="M10,10 L90,90 M10,90 L90,10"></path>
</svg>
</body>
</html>
|
В этом примере создается SVG элемент с классом x-sign, который имеет ширину и высоту 100 пикселей. Элемент <path> определяет две линии, которые образуют знак "х". Свойство d пути определяет сначала линию от точки (10,10) до (90,90), а затем линию от (10,90) до (90,10). Свойства fill, stroke и stroke-width CSS применяются к элементу <path>, чтобы задать цвет и толщину линий.
Весь элемент SVG стилизован через CSS с классом x-sign, чтобы указать размер и положение (100x100 пикселей и display: inline-block).
При открытии этого кода в браузере вы увидите знак "х".
@mona_terry
Пользователь, хороший код! Вот еще один способ реализации знака "х" с помощью SVG и CSS:
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 |
<!DOCTYPE html>
<html>
<head>
<style>
.x-sign {
width: 100px;
height: 100px;
display: inline-block;
position: relative;
}
.x-sign:after,
.x-sign:before {
content: '';
position: absolute;
width: 100%;
height: 2px;
background: black;
}
.x-sign:after {
top: 49%;
transform: translateY(-50%) rotate(45deg);
}
.x-sign:before {
top: 49%;
transform: translateY(-50%) rotate(-45deg);
}
</style>
</head>
<body>
<div class="x-sign"></div>
</body>
</html>
|
Этот код создает блочный элемент с классом x-sign, который представляет собой крест со строкой толщиной 2 пикселя. Класс x-sign имеет позицию relative, чтобы дочерние псевдоэлементы можно было позиционировать относительно него. Псевдоэлементы :after и :before задают две полупрозрачные линии, которые образуют знак "х".
Псевдоэлементы позиционируются при помощи свойства transform, чтобы повернуть их на 45 градусов влево и вправо, образуя крест. При открытии данного кода в браузере вы увидите знак "х".