CODEWITHSUNDEEP
htmlcsssasstailwind-cssclip
Ossy Lab
Ossy Lab

Reputation: 1

How can I clip a Div to get the attached shapes

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
  );

Upvotes: -1

Views: 91

Answers (2)

Luki
Luki

Reputation: 31

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>

Upvotes: 2

Tanishq S
Tanishq S

Reputation: 774

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>

Upvotes: 0

Related Questions