Skewed Section Seperator - Align with Image

Hi Community 🙂 I would like to use a skewed section seperator in my Hero section. Unfortunately i cannot get it to work, that the flex-item (image) in the flexbox container, inside of the section, is honored with the skewed section seperators. I have created the following codepen to illustrate the issue: https://codepen.io/h1ghrise/pen/ZEPzmEP What i want to achive is: - image on the right should fit nicely inside the section - skewed seperator should "cut" (?) the image appropriately Thanks 🙂
2 Replies
MarkBoots
MarkBoots•12mo ago
you can use a clip-path, that way there is no need for pseudo elements for example
.diagonal {
--cut: 2rem;
clip-path: polygon(
0 var(--cut), /* top left */
100% 0, /* top right */
100% calc(100% - var(--cut)), /* bottom right */
0 100% /* bottom left */
);
}
.diagonal {
--cut: 2rem;
clip-path: polygon(
0 var(--cut), /* top left */
100% 0, /* top right */
100% calc(100% - var(--cut)), /* bottom right */
0 100% /* bottom left */
);
}
or you could use a mask with gradients if you want to use an angle in degree
.diagonal {
--mask-angle: 2deg;
--mask-gradient1: conic-gradient(
from calc(270deg - var(--mask-angle)) at top right,
transparent var(--skew), black 0);
--mask-gradient2: conic-gradient(
from calc(90deg - var(--mask-angle)) at bottom left,
transparent var(--skew), black 0);
--mask:
var(--mask-gradient1) top / 100% 51% no-repeat,
var(--mask-gradient2) bottom / 100% 51% no-repeat;
-webkit-mask: var(--mask);
mask: var(--mask);
}
.diagonal {
--mask-angle: 2deg;
--mask-gradient1: conic-gradient(
from calc(270deg - var(--mask-angle)) at top right,
transparent var(--skew), black 0);
--mask-gradient2: conic-gradient(
from calc(90deg - var(--mask-angle)) at bottom left,
transparent var(--skew), black 0);
--mask:
var(--mask-gradient1) top / 100% 51% no-repeat,
var(--mask-gradient2) bottom / 100% 51% no-repeat;
-webkit-mask: var(--mask);
mask: var(--mask);
}
h1ghrise
h1ghriseOP•12mo ago
thanks @MarkBoots - Both variants work like a charm 🙂 I will do some additional research for clip.path and masks.
Want results from more Discord servers?
Add your server