Making an awkward div shape

Question

I was wondering if it's possible to make a complex shape with a div similar to the following:

It's basically a rounded square with the corners pinched inwards. The goal is to use a background image to fill it. I could accomplish it with a clip-mask with the following SVG pathing:

<path id="Path_1386" data-name="Path 1386" d="M20.148,599.906,455.922,482.262a15.989,15.989,0,0,0,11.817-15.433V139.242a15.986,15.986,0,0,0-11.632-15.381L20.335.613A15.984,15.984,0,0,0,0,15.994V584.475a15.983,15.983,0,0,0,20.148,15.431" transform="translate(0 0)" />

But it's a bit awkward to work with it in CSS for responsive resizing.

Great question, and I don't know if you'd be able to do this w/ an SVG. Take a look at this site, polypane.app/css-3d-transform-examples, 3D Transform #13 by hqdrone on CodePen — Rob Scott
– Rob Scott, Commented Dec 10, 2021 at 2:58

vee · Accepted Answer · 2021-12-10 03:55:42Z

Option 1 (`transform`)

Use transform: perspective() with tranfrom: rotateY().

#box {
    background-color: #f00;
    border-radius: 40px;
    height: 300px;
    margin: 20px 0 0 20px;
    transform: perspective(300px) rotateY(10deg);
    width: 300px;
}

<div id="box"></div>

Example on Jsfiddle

Option 1.1

Use transform: matrix3d(). You can use generator here

#box {
    background-color: #f00;
    border-radius: 40px;
    height: 300px;
    margin: 50px 0 0 50px;
    transform: matrix3d(0.98,0,0.17,.0005,0.00,1,0.00,0,-0.17,0,0.98,0,0,0,0,1);
    width: 300px;
}

<div id="box"></div>

Example on Jsfiddle

Option 2 (`perspective` with `transform`)

Use perspective with transform: rotateY(). This option you can use perspective-origin to point the position.

#perspective-box {
    perspective: 400px;
    perspective-origin: left;
}

#box {
    background-color: #f00;
    border-radius: 40px;
    height: 300px;
    margin: 20px 0 0 20px;
    transform-style: preserve-3d;
    transform: rotateY(15deg);
    width: 300px;
}

<div id="perspective-box">
    <div id="box"></div>
</div>

Example on Jsfiddle

Option 2.1

Use perspective with transform: rotate3D().

#perspective-box {
    perspective: 700px;
}

#box {
    background-color: #f00;
    border-radius: 40px;
    height: 300px;
    margin: 50px 0 0 50px;
    transform: rotate3D(0, 1, 0, 30deg);
    width: 300px;
}

<div id="perspective-box">
    <div id="box"></div>
</div>

Example on Jsfiddle

Temani Afif · Accepted Answer · 2021-12-10 09:01:47Z

clip-path combined with an SVG filter can do this. Adjust the stDeviation of the filter to control the radius.

.box {
  width:200px;
  height:300px;
  display:grid;
  margin:20px;
  filter: url('#goo');
}

.box > div{
  clip-path:polygon(0 0,100% 20%,100% 80%,0 100%);
  background:url(https://picsum.photos/id/1069/200/300)
}

<div class="box">
  <div></div>
</div>


<svg style="visibility: hidden; position: absolute;" width="0" height="0" xmlns="http://www.w3.org/2000/svg" version="1.1">
  <defs>
        <filter id="goo"><feGaussianBlur in="SourceGraphic" stdDeviation="8" result="blur" />    
            <feColorMatrix in="blur" mode="matrix" values="1 0 0 0 0  0 1 0 0 0  0 0 1 0 0  0 0 0 19 -9" result="goo" />
            <feComposite in="SourceGraphic" in2="goo" operator="atop"/>
        </filter>
    </defs>
</svg>

Collectives™ on Stack Overflow

Making an awkward div shape

2 Answers 2

Option 1 (`transform`)

Option 1.1

Option 2 (`perspective` with `transform`)

Option 2.1

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Option 1 (transform)

Option 1.1

Option 2 (perspective with transform)

Option 2.1

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related

Option 1 (`transform`)

Option 2 (`perspective` with `transform`)