Question 370244 in Html Question posted in
Some basic documentation can be found here.

Html – 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
  );
Tags:

2

Answers


  1. 0

    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>
    Login or Signup to reply.
  2. 0

    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>
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search