How can I make this shape with background gradients?

Question

I want to create this shape with only background. Or may clip-path & pseudo-element.

I tried so far with ::before

div {
  height: 300px;
  width: 400px;
  background: tomato;
  border-radius: 0 0 5px 0;
  position: relative;
}
div::before {
  content: '';
  position: absolute;
  left: 0;
  bottom: 0;
  width: inherit;
  height: 400px;
  background: red;
  bottom: -395px;
  border-radius: 0 0 400px 0;
}

.abs {
  width: 400px;
  position: absolute;
  top: 0;
  left: 0;
}

body {
  margin: 0;
}

<div></div>

<img src="https://i.hizliresim.com/LvZGL1.png" alt="" class="abs"> <!-- intended shape -->

Check this out https://css-tricks.com/working-with-shapes-in-web-design/ — Akshay Kumar, Jul 25 '19 at 07:25
@VipulSharma yes. But bottom radius not same as in below answers. Not possible with border-radius. May svg, linear-gradients or clip-path. — doğukan, Jul 25 '19 at 07:34
@dgknca Then atleast post the code progress you have made so far with the question — Vipul Sharma, Jul 25 '19 at 07:36

score 2 · Accepted Answer · answered Jul 25 '19 at 08:12

You can consider skew transformation combined with some overflow and radius:

.box {
  width: 200px;
  height: 280px;
  position: relative;
  overflow:hidden;
}

.box:before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  border-bottom-right-radius: 100px 50px;
  background: linear-gradient(26deg,red,blue);
  transform: skewY(-26deg);
  transform-origin: left;
}

<div class="box">

</div>

score 1 · Answer 2 · answered Jul 25 '19 at 07:24

* {
  margin: 0;
  padding: 0;
}

.bg {
  background: #e4f5fc;
  background: -webkit-linear-gradient(left,  #e4f5fc 0%,#bfe8f9 50%,#9fd8ef 51%,#2ab0ed 100%);
  background: -webkit-gradient(linear,  left top, right top,  from(#e4f5fc),color-stop(50%, #bfe8f9),color-stop(51%, #9fd8ef),to(#2ab0ed));
  background: -o-linear-gradient(left,  #e4f5fc 0%,#bfe8f9 50%,#9fd8ef 51%,#2ab0ed 100%);
  background: linear-gradient(to right,  #e4f5fc 0%,#bfe8f9 50%,#9fd8ef 51%,#2ab0ed 100%);
  filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#e4f5fc', endColorstr='#2ab0ed',GradientType=1 );
  padding: 600px 0;
  -webkit-clip-path: inset(0% 0% 0 round 0 0% 100% 0%);
          clip-path: inset(0% 0% 0 round 0 0% 100% 0%);
}

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width">
  <title>JS Bin</title>
</head>
<body>
<section class="bg">
  
</section>
</body>
</html>

If you want to change the shape please adjust the shape accordingly... Hope it'll help you!

For reference you can go through this link https://codepen.io/clairebones/full/dopzvv

score 0 · Answer 3 · answered Jul 25 '19 at 07:29

0

I am using only background color, but you can use your gradient color, it will be worked fine

 
.shape {
 position: relative;
 background: #EC6A56;
 width: 300px;
 height: 800px;
 border-bottom-right-radius: 390px;
}

<div class="shape"></div>

answered Jul 25 '19 at 07:29

Sunil R.

851
8
15

But not same exactly – doğukan Jul 25 '19 at 07:30

How can I make this shape with background gradients?

3 Answers3