Question 167498 in CSS Question posted in
Some basic documentation can be found here.

How to create this shape with CSS?

How can I create this with CSS?

Image 1

Image 2

This is what I have so far:

div {
    -webkit-clip-path: polygon(0 79%, 60% 78%, 78% 100%, 0 100%);
    clip-path: polygon(0 79%, 60% 78%, 78% 100%, 0 100%);
    background:red;
    height:300px;
    width:500px;
    border-radius: 25x;
}
Tags:

2

Answers


  1. 0

    An idea using skew transformation:

    .box {
  --r: 20px; /* the radius */
  
  width: 300px;
  height: 50px;
  border-top-left-radius: var(--r);
  position: relative;
  overflow: hidden;
}
.box::before,
.box::after {
  content:"";
  position: absolute;
  background: red;
  transform: skew(40deg); /* adjust this to control the inclination */
  transform-origin: bottom right;
}

.box::before {
  inset: 0 var(--r) 0 0;
  border-top-right-radius: var(--r);
}
.box::after {
  right: .8px;
  bottom: 0;
  width: var(--r); 
  aspect-ratio: 1;
  -webkit-mask: radial-gradient(100% 102% at 100% 0,#0000 97%,#000);
}
    <div class=box></div>
    Login or Signup to reply.
  2. 0

    Another solution using skew but no mask:

    (try it on codepen.io)

    :root {
  /* Play with these */
  --border-radius: 10px;
  --height: 50px;
  --width: 200px;
  --padding-tb: 2em;
  --padding-rl: 2em;
  --background: #ffe600;
  --skew-angle: 45deg;
  
  /* ...but not these */
  --real-border-radius: min(
    calc(var(--height) / 2 + var(--padding-tb)),
    var(--border-radius)
  );
  --real-height: calc(
    var(--height) +
    var(--padding-tb) * 2
  );
  --stop: calc(
    (var(--real-height) / 2) /
    tan(90deg - var(--skew-angle)) +
    var(--real-border-radius)
  );
  --real-width: calc(
    var(--width) +
    var(--stop) * 2 +
    var(--padding-rl) * 2
  );
  
  --before-width: calc(
    var(--real-width) -
    var(--stop) * 2
  );
  --after-left: calc(
    var(--stop) +
    var(--before-width)
  );
}

.rounded-trapezoid {
  position: relative;
  box-sizing: border-box;
  border-radius:
    var(--real-border-radius)
    var(--real-border-radius)
    0 0;
  height: var(--real-height);
  width: var(--real-width);
  overflow: hidden;
  background:
    linear-gradient(
      to bottom,
      transparent 50%,
      var(--background) 50%
    ),
    linear-gradient(
      calc(90deg - var(--skew-angle)),
      var(--background) calc(
        var(--stop) +
        var(--before-width) / 2
      ),
      #fff var(--real-border-radius)
    );
  padding: var(--padding-tb) var(--padding-rl);
}

.rounded-trapezoid::before,
.rounded-trapezoid::after {
  content: '';
  position: absolute;
  top: 0;
  height: 100%;
  transform: skewX(var(--skew-angle));
}

.rounded-trapezoid::before {
  left: var(--stop);
  border-radius:
    var(--real-border-radius)
    var(--real-border-radius)
    0 0;
  width: var(--before-width);
  background: var(--background);
}

.rounded-trapezoid::after {
  left: var(--after-left);
  border-radius: 0 0 0 var(--real-border-radius);
  width: calc(var(--stop) * 2);
  background: #fff;
}


/* Demo only */

.rounded-trapezoid {
  margin: 2em 4em;
}

.rounded-trapezoid::before,
.rounded-trapezoid::after {
  visibility: hidden;
}

#outline:checked ~ .rounded-trapezoid {
  outline: 1px solid black;
}

#outline:checked ~ .rounded-trapezoid::before {
  outline: 1px solid red;
}

#outline:checked ~ .rounded-trapezoid::after {
  outline: 1px solid green;
}

#visibility:checked ~ .rounded-trapezoid::before,
#visibility:checked ~ .rounded-trapezoid::after {
  visibility: visible;
}
    <label for="outline">Outline:</label>
<input type="checkbox" id="outline" checked>
<br>
<label for="visibility">Pseudo-elements' visibility:</label>
<input type="checkbox" id="visibility" checked>

<div class="rounded-trapezoid"></div>
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search