Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

CSS div oval shape

Tags:

html

css

oval shape example image

Can someone help me out making such a cut out from div?

Found possible solution,but dont have knowledge in SVG.Maybe someone can help me out.

HTML:

 <svg viewBox="0 0 400 150">
 <path opacity="0.6" fill="red" d="M0,10 Q0,0 10,0 Q195,40 390,0 Q400,0 400,10 Q390,75 400,140 Q400,150 390,150 Q195,100 10,150 Q0,150 0,140 Q10,75       0,10" />
 </svg>

CSS:

svg {
  position: relative;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}
like image 928
Arkadis Stepanov Avatar asked Apr 07 '26 07:04

Arkadis Stepanov


1 Answers

body {
    overflow-x: hidden
}

svg {
    left: 47%;
    position: relative;
    top: -24%;
    transform: translate(-50%, -50%);
    width: 2000px;
}
like image 147
amit bende Avatar answered Apr 10 '26 00:04

amit bende



Donate For Us

If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!