3

I have to create image like this using CSS:- enter image description here

If not possible then how can I use this with minimum image size? Like in below code I have used two images but this is also not working...

<div style="background:url('https://i.stack.imgur.com/veeS8.png') no-repeat top center, url('https://i.stack.imgur.com/2i7ed.png') repeat-y top 50px center; widhth:100%; height:800px; background-size:100%;">

</div>
doğukan
  • 23,073
  • 13
  • 57
  • 69
Rohit Verma
  • 3,657
  • 7
  • 37
  • 75
  • 1
    Refer to this link [enter link description here](https://stackoverflow.com/questions/40808155/how-to-draw-rectangle-with-one-side-curved-in-html) – Faisal Anwar Mar 30 '21 at 11:09

5 Answers5

3

Also possible with masking without using image. This is more flexible. You can control easily the slope by changing the variable.

.container {
  --slope: 100px;
  width: 100%;
  height: 500px;
  --mask: radial-gradient(farthest-side, #000 99%, transparent 100%) 50% 0 / 150% calc(var(--slope) * 2) no-repeat, 
          linear-gradient(#000, #000) 0 100% / 100% calc(100% - var(--slope)) no-repeat;
  -webkit-mask: var(--mask);
          mask: var(--mask);
  background: linear-gradient(90deg, rgba(133, 132, 242, 1) 0%, rgba(35, 136, 253, 1) 50%, rgba(127, 237, 226, 1) 100%);
}
<div class='container'></div>
doğukan
  • 23,073
  • 13
  • 57
  • 69
2

something like this would work:

div.cont:before {
    content: '';
    background-image: url(https://i.stack.imgur.com/2i7ed.png);
    background-size: 100% auto;
    position: absolute;
    top: 44px;
    left: 0;
    right: 0;
    bottom: 0;
}
<div class="cont" style="width: 100%;height:800px;background-image: url(https://i.stack.imgur.com/veeS8.png);background-size: 100% auto;background-repeat: no-repeat;position: relative;">

</div>
GucciBananaKing99
  • 1,473
  • 1
  • 11
  • 31
bee
  • 66
  • 7
2

a trivial task using clip-path

.container {
  height: 400px;
  background: linear-gradient(90deg, rgba(133,132,242,1), rgba(35,136,253,1), rgba(127,237,226,1));
  clip-path:ellipse(90% 100% at bottom); /* simply adjust the 90% */
}
<div class='container'></div>

To have the same curvature on resize use pixel value

.container {
  height: 400px;
  max-width:800px;
  background: linear-gradient(90deg, rgba(133,132,242,1), rgba(35,136,253,1), rgba(127,237,226,1));
  clip-path:ellipse(600px 100% at bottom);
}
<div class='container'></div>
Temani Afif
  • 245,468
  • 26
  • 309
  • 415
0
.element {
    width: 200px;
    height: 200px;
    border-radius: 100% 100% 0 0 / 20% 20% 0 0;
    background-image: linear-gradient(to right, #8684F2 0%, #1BEEE3 100%);
}
Kazimierz Niewielki
  • 405
  • 3
  • 5
-1

You can use CSS Gradient to get this kind of result. You can also use some tools online to generate some gradients like this one: https://cssgradient.io/

.container {
  width: 500px;
  height: 500px;
  background: rgb(133,132,242);
background: linear-gradient(90deg, rgba(133,132,242,1) 0%, rgba(35,136,253,1) 50%, rgba(127,237,226,1) 100%);
}
<div class='container'>
  
</div>
luanmessias
  • 96
  • 1
  • 6