Drawing shapes in css is responsive

Question

I have a "div" with a little curve at the top. I tried and made use of the border. But my concern is not responsiveness. How to make it responsive. Any ideas? Here is the code I tried to look at this.

<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;
}

Also send fiddle

Answer 1

Using CSS Gradients + Transforms:

One way to achieve this shape with the response at the top is to use two skewed pseudo-elements, adding a background only to the pseudo-elements, and not to the parent element.

, 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>

Hide result

CSS Clip-path: ( )

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>

Hide result

SVG Clip-path: ( )

SVG clip-path. , CSS, , , .

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

Hide result

SVG path polygon ( clip-path) , , SVG- ( , , , ).