Как сверстать эту линию?

Question

Подскажите как сверстать кривую линию на всю ширину экрана

Answer 1

Пример

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>

Answer 2

Вариант решения 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>

БЛОГ НА HUSL

Как сверстать эту линию?

Ответы (2 шт):

Вариант решения SVG