Hide some part of Rectangle shape in CSS

user_13718296 0
Viewed 478

I want to achieve

I want to hide that second rectangular shape and the width should be 100% and responsive. I am using position: absolute; & right:-10%. I also tried body { max-width:100%; } but it isn't working. Could you explain why is this happening and how to fix this?

.container2 {
    position: absolute;
    right: -10%;
    width: 35vmax;
    height: 90vmin;
    background-image: linear-gradient(to bottom,hsl(293, 100%, 63%),hsl(264, 100%, 61%));
    border-radius: 50% 50% 0% 0%;
}
<div class="container2"></div>

css html
2 Answers

Have you tried this?

body {
  overflow-x: hidden;
}
user_142197890

If you are looking to have a particular shape to the rectangle or any shape, you should use clip-path css property and its very easy, supports most of the latest browsers.

clip-path: polygon(25% 0%, 100% 0%, 75% 100%, 0% 100%);

Please check- clippy for further reference or help.

I hope this is useful.

user_94555260
Related