Рисование фигур в css отзывчиво

Question

У меня есть «div» с небольшой кривой вверху. Я пробовал и добивался использования границы. Но моя забота - это не отзывчивость. Как сделать его отзывчивым. Есть идеи? Вот код, который я попробовал, взгляните на это.

<div></div> 

div { 
    position:relative; 
    width:100%; 
    float:left; 
    background:green; 
    height:80px; 
    overflow:hidden 
    } 
div:before { 
    position: absolute; 
    content: ''; 
    left: 0; 
    right: 50%; 
    border: 298px solid transparent; 
    top: 0; 
    border-top: 13px solid #fff; 
} 

Также сошлитесь fiddle

Answer 1

Использование CSS Градиенты + Превращает:

Одним из способов достижения этой формы с отзывчивым разрезом в верхней части будет использовать два перекошенные псевдоэлементы, добавьте фон только к псевдоэлементам, а не к родительскому элементу.

Поскольку псевдоэлементы имеют половину ширины их родительского элемента, заполнение linear-gradient, которое требуется от родителя, также должно быть разделено на две половины и назначено на 2 псевдоэлемента.

Одним из потенциальных недостатков этого подхода является то, что глубина разреза будет увеличиваться, если высота родительского div увеличивается.

.shape { 
 
    position: relative; 
 
    height: 100px; 
 
    width: 100%; 
 
    overflow: hidden; 
 
} 
 
.shape:after, 
 
.shape:before { 
 
    position: absolute; 
 
    content: ''; 
 
    height: 100%; 
 
    width: calc(50% + 1px); 
 
    top: 0; 
 
    backface-visibility: hidden; 
 
} 
 
.shape:before { 
 
    left: 0; 
 
    background-image: linear-gradient(to right, red, gold); 
 
    transform: skewY(2deg); 
 
    transform-origin: left top; 
 
} 
 
.shape:after { 
 
    right: 0; 
 
    background-image: linear-gradient(to right, gold, crimson); 
 
    transform: skewY(-2deg); 
 
    transform-origin: right top; 
 
} 
 
body { 
 
    background-image: radial-gradient(circle at center, sandybrown, chocolate); 
 
    min-height: 100vh; 
 
}

<div class='shape'></div>

Использование CSS Clip-путь: (плохая поддержка браузера)

Другой подход должен был бы использовать CSS clip-path. Это, на мой взгляд, было бы идеальным вариантом, поскольку не должно быть никаких манипуляций с градиентом (например, разделение на половину), глубина разреза не изменится, даже если высота div увеличивается и т. Д. Но, к сожалению, у нее плохой браузер поддержка.

.shape { 
 
    height: 100px; 
 
    width: 100%; 
 
    -webkit-clip-path: polygon(0px 0px, 50% 14px, 100% 0%, 100% 100%, 0% 100%); 
 
    background-image: linear-gradient(to right, red, gold, crimson); 
 
} 
 
body { 
 
    background-image: radial-gradient(circle at center, sandybrown, chocolate); 
 
    min-height: 100vh; 
 
}

<div class='shape'></div>

Использование SVG Clip-путь: (лучшая поддержка браузера)

Другой подход будет использовать SVG clip-path. Это улучшенная поддержка браузера, чем его коллега, но, к сожалению, здесь глубина резкости будет меняться по мере изменения размеров.

.shape { 
 
    height: 100px; 
 
    width: 100%; 
 
    -webkit-clip-path: url(#clipper); 
 
    clip-path: url(#clipper); 
 
    background-image: linear-gradient(to right, red, gold, crimson); 
 
} 
 
body { 
 
    background-image: radial-gradient(circle at center, sandybrown, chocolate); 
 
    min-height: 100vh; 
 
}

<svg width="0" height="0" viewBox="0 0 200 200"> 
 
    <defs> 
 
    <clipPath id="clipper" clipPathUnits="objectBoundingBox"> 
 
     <path d="M0,0 0.5,0.07 1,0 1,1 0,1z" /> 
 
    </clipPath> 
 
    </defs> 
 
</svg> 
 
<div class='shape'></div>

В качестве альтернативы, мы можем сделать то же самое с использованием SVG path или polygon элемента (вместо clip-path) и положения его абсолютно в пределах родительского контейнера также, но она будет иметь то же ограничение, путь клипа SVG (то есть глубина резкости будет увеличиваться, если размеры изменяются, потому что значения находятся в долях размера родительского контейнера, а не фиксированной длины).