Как нарисовать знак "х" с помощью svg и css?

Пользователь

mona_terry

от mona_terry , в категории: HTML/CSS , 6 месяцев назад

9 | 0

markup css

1 ответ

Пользователь

christine

от christine , 6 месяцев назад

@mona_terry

Вы можете нарисовать знак "х" с помощью SVG и CSS, используя элемент <path> для контура.

Вот пример кода:

<!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).

При открытии этого кода в браузере вы увидите знак "х".

0 | 0

Как нарисовать знак "х" с помощью svg и css?

1 ответ

Похожие обсуждения: