Html - How can I clip a Div to get the attached shapes

OssyLab
April 4, 2024
203 views
0 votes
2 Answers

please anyone knows how I can clip a div to get the green shapes in the attached image, using clip-path or anything else Attached Image here

I have tried using clip path but I am not getting the desired results. I did something like the below but can’t get the rounded corners, or make it look exactly like this image

clip-path: polygon(
    50% 0%,
    68% 0,
    82% 19%,
    100% 44%,
    76% 70%,
    52% 97%,
    0 66%,
    0 52%,
    0 35%,
    0 0
  );

Answers

You can use CSS’s border-radius and transform properties rather than clip-path to simplify this.
Additionally, it’s preferred to use pseudo-elements of CSS to get the desired shape elements

This example would help you:

body {
  margin: 0;
  padding: 0;
}

.parent {
  width: 100vw;
  height: 100vh;
  margin-top: -6rem;
  background: white;
  transform: rotate(-10deg);
  position: relative;
}

.parent::after {
  content: "";
  position: absolute;
  width: 250px;
  height: 250px;
  border-bottom-left-radius: 20px;
  border-bottom-right-radius: 40px;
  transform: skewX(30deg);
  background: #00dd8c;
  top: 0;
  left: 0;
}

.parent::before {
  content: "";
  position: absolute;
  width: 120px;
  height: 220px;
  border-bottom-left-radius: 15px;
  border-bottom-right-radius: 30px;
  transform: skewX(30deg);
  background: #00dd8c;
  top: 0;
  right: 80px;
}

<div class="parent">
</div>

SVGs are ideal for quickly reproducing graphical elements like these. Depending on how you want this background to behave on different screen sizes, you might need to split it up into multiple parts.

* {
  margin: 0;
  padding: 0;
}

.background {
  width: 100vw;
  height: 100vh;
  background: url('data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0iVVRGLTgiIHN0YW5kYWxvbmU9Im5vIj8+PCFET0NUWVBFIHN2ZyBQVUJMSUMgIi0vL1czQy8vRFREIFNWRyAxLjEvL0VOIiAiaHR0cDovL3d3dy53My5vcmcvR3JhcGhpY3MvU1ZHLzEuMS9EVEQvc3ZnMTEuZHRkIj48c3ZnIHdpZHRoPSIxMDAlIiBoZWlnaHQ9IjEwMCUiIHZpZXdCb3g9IjAgMCA5OTggMzE5IiB2ZXJzaW9uPSIxLjEiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgeG1sbnM6eGxpbms9Imh0dHA6Ly93d3cudzMub3JnLzE5OTkveGxpbmsiIHhtbDpzcGFjZT0icHJlc2VydmUiIHN0eWxlPSJmaWxsLXJ1bGU6ZXZlbm9kZDtjbGlwLXJ1bGU6ZXZlbm9kZDtzdHJva2UtbGluZWpvaW46cm91bmQ7c3Ryb2tlLW1pdGVybGltaXQ6MjsiPjxwYXRoIGQ9Ik0wLDBjMCwwIDI3MC43MzgsMjAzLjcxNSAzOTYuMTMsMjk4LjA2NWMzNi43ODIsMjcuNjc3IDg3LjU3NywyNy4xNjYgMTIzLjc5NSwtMS4yNDZjNDMuMzM1LC0zMy45OTYgMTAxLjE2NSwtNzkuMzYxIDE0NC41NjUsLTExMy40MDhjMjcuNjYzLC0yMS43MDEgMzguNzc5LC02OS42MjcgNC4xMzcsLTEwMS42NzZjLTQwLjgxLC0zNy43NTUgLTg4LjM0OCwtODEuNzM1IC04OC4zNDgsLTgxLjczNWwtNTgwLjI3OSwwWiIgc3R5bGU9ImZpbGw6dXJsKCNfTGluZWFyMSk7Ii8+PHBhdGggZD0iTTYzNy41LDBjMCwwIDg3LjYwMiw4My45NTIgMTQwLjU4LDEzNC43MjJjMjIuMDM3LDIxLjExOSA1Ni44MDMsMjEuMTE5IDc4Ljg0LDBjNTIuOTc4LC01MC43NyAxNDAuNTgsLTEzNC43MjIgMTQwLjU4LC0xMzQuNzIybC0zNjAsMFoiIHN0eWxlPSJmaWxsOnVybCgjX0xpbmVhcjIpOyIvPjxkZWZzPjxsaW5lYXJHcmFkaWVudCBpZD0iX0xpbmVhcjEiIHgxPSIwIiB5MT0iMCIgeDI9IjEiIHkyPSIwIiBncmFkaWVudFVuaXRzPSJ1c2VyU3BhY2VPblVzZSIgZ3JhZGllbnRUcmFuc2Zvcm09Im1hdHJpeCgyMTkuNTg3LC0yNzAsMjcwLDIxOS41ODcsMzY4Ljc5OCwyNzcuNSkiPjxzdG9wIG9mZnNldD0iMCIgc3R5bGU9InN0b3AtY29sb3I6IzA2ZGY4OTtzdG9wLW9wYWNpdHk6MSIvPjxzdG9wIG9mZnNldD0iMSIgc3R5bGU9InN0b3AtY29sb3I6IzAwZGU2NjtzdG9wLW9wYWNpdHk6MSIvPjwvbGluZWFyR3JhZGllbnQ+PGxpbmVhckdyYWRpZW50IGlkPSJfTGluZWFyMiIgeDE9IjAiIHkxPSIwIiB4Mj0iMSIgeTI9IjAiIGdyYWRpZW50VW5pdHM9InVzZXJTcGFjZU9uVXNlIiBncmFkaWVudFRyYW5zZm9ybT0ibWF0cml4KDI3MCwtMjEwLDIxMCwyNzAsNzIwLDc1KSI+PHN0b3Agb2Zmc2V0PSIwIiBzdHlsZT0ic3RvcC1jb2xvcjojMDZkZjg5O3N0b3Atb3BhY2l0eToxIi8+PHN0b3Agb2Zmc2V0PSIxIiBzdHlsZT0ic3RvcC1jb2xvcjojMDBkZTY2O3N0b3Atb3BhY2l0eToxIi8+PC9saW5lYXJHcmFkaWVudD48L2RlZnM+PC9zdmc+');
  background-repeat: no-repeat;
  background-position: center top;
  background-size: auto 95%;

<div class="background"></div>

Please signup or login to give your own answer.

Click here to cancel reply.

Html – How can I clip a Div to get the attached shapes

Answers