CODEWITHSUNDEEP
htmlcss
Jeet
Jeet

Reputation: 795

Hide some part of Rectangle shape in CSS

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>

Upvotes: 2

Views: 1110

Answers (2)

Anup Bangale
Anup Bangale

Reputation: 631

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.

Upvotes: 1

Yevhenii Shlapak
Yevhenii Shlapak

Reputation: 786

Have you tried this?

body {
  overflow-x: hidden;
}

Upvotes: 2

Related Questions