Чтобы создать изогнутую линию в CSS, можно воспользоваться свойством `border` и некоторыми трансформациями. Ниже представлены два основных способа: использование элемента с границей и использование SVG.
### Способ 1: Использование границ (border)
Можно создать линию под углом с помощью CSS и псевдоэлементов. В этом примере мы создадим линию, поднимающуюся под углом с использованием трансформации.
```html
<!DOCTYPE html>
<html lang="ru">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Изогнутая линия</title>
<style>
.line {
position: relative;
width: 200px; /* Длина линии */
height: 0;
border-top: 2px solid black; /* Толщина и цвет линии */
transform: rotate(45deg); /* Угол наклона линии (45 градусов) */
transform-origin: left; /* Начало трансформации */
}
</style>
</head>
<body>
<div class="line"></div>
</body>
</html>
```
### Способ 2: Использование SVG
SVG (Scalable Vector Graphics) предоставляет больше контроля и возможностей для создания изогнутых и наклонных линий. Вот пример изогнутой линии с помощью SVG.
```html
<!DOCTYPE html>
<html lang="ru">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Изогнутая линия SVG</title>
<style>
svg {
width: 200px; /* Ширина SVG */
height: 200px; /* Высота SVG */
}
</style>
</head>
<body>
<svg>
<path d="M 10 150 Q 95 10 180 150" stroke="black" stroke-width="2" fill="transparent"/>
</svg>
</body>
</html>
```
### Объяснения
1. **CSS граница**: в этом примере мы используем `transform: rotate(45deg)`, чтобы повернуть линию на 45 градусов. Мы также используем `transform-origin`, чтобы указать, откуда начнется поворот.
2. **SVG**: здесь используются координаты для создания кривой с помощью команды `Q` (кривая Безье второго порядка). Этот метод позволяет более точно контролировать форму и изгиб линии.
Выберите подходящий способ в зависимости от ваших требований и предпочтений!