Are you using a clip-path to assign to your element?
example:
.element{
clip-path: rect(10px, 20px, 30px, 40px);
}
No, as I need cross-browser support. SVG also does not work for what I am trying to achieve.
I am essentially using four divs (maybe a little overkill)—two with rotate css transforms and two containers—to create a trapezoid in which background images/videos will be clipped.
HTML:
<div class="transform-containter">
<div class="transform-right">
<div class="transform-left">
<div class="transform-content">
<div class="block-container">
BLOCK CONTENT HERE
</div>
</div>
</div>
</div>
</div>
CSS:
.transform-containter {
width: 100%;
height: auto;
margin-top: 0;
overflow-x: hidden;
overflow-y: hidden;
}
.transform-right {
position: relative;
width: 110%;
height: 100%;
top: 0;
left: -5%;
-webkit-transform: rotate(2deg);
-moz-transform: rotate(2deg);
-ms-transform: rotate(2deg);
-o-transform: rotate(2deg);
transform: rotate(2deg);
overflow: hidden;
margin-top:2.5%;
}
.transform-left {
position: relative;
width: 110%;
height: 100%;
left: -5%;
-webkit-transform: rotate(-4deg);
-moz-transform: rotate(-4deg);
-ms-transform: rotate(-4deg);
-o-transform: rotate(-4deg);
transform: rotate(-4deg);
overflow: hidden;
margin-top: -4%;
margin-bottom: 3.5%;
}
.transform-content {
width: 100%;
height: 100%;
-webkit-transform: rotate(2deg);
-moz-transform: rotate(2deg);
-ms-transform: rotate(2deg);
-o-transform: rotate(2deg);
transform: rotate(2deg);
background-color: #cccccc;
background-position: center;
background-repeat: no-repeat;
background-size: cover;
margin: 2% 0 -2% 0;
padding: 2em 10%;
}
So I want to be able to add this before the ‘block’:
<div class="transform-containter">
<div class="transform-right">
<div class="transform-left">
<div class="transform-content">
And this after:
</div>
</div>
</div>
</div>
I remember an article from a couple of years ago. Let me try and find it. See if it will help you.
Thank you so much for sending this over @serafinnyc, very interesting and comprehensive guide to clipping and masking.
I have done a fair bit of experimenting with CSS clip-path and SVG clipPath and unfortunately they will not work for what I am trying to achieve. CSS clip-path would be PERFECT, but I need cross-browser support.
The sightly ‘hacky’ way of using CSS transforms I have suggested above seems to work on all modern browsers, but I just don’t know how to add the extra HTML to a gutenberg block.
You’re welcome. Chris is very good. He had a great teacher. ;0)
Fun stuff. Maybe try HTML5 now. LOL Even more fun!
