Подскажите как сверстать кривую линию на всю ширину экрана
2 ответа
Пример
body {
margin: 0;
padding: 1.5rem 0;
}
.line {
height: 2rem;
width: 100%;
overflow: hidden;
position: relative;
box-sizing: border-box;
}
.line::after {
content: '';
width: 120vw;
height: 100px;
border: 1px solid #ccc;
border-radius: 50%;
transform: translateX(-50%);
position: absolute;
top: 0;
left: 50%;
box-sizing: border-box;
}
<div class="line"></div>
Вариант решения SVG
На мой взгляд это решение проще и лишено недостатка решения CSS (меняется радиус кривой при изменении размера окна просмотра)
.container {
width:100vw;
height:100vh;
}
<div class="container">
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 865 442" >
<path d="M41 247s189-45 399-45c174 0 392 44 392 44" fill="none" stroke="grey"/>
</svg>
</div>