Kevin Powell - Community•11mo ago

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 🙂

Benjamin

CodePen

Hero Test

...

2 Replies

MarkBoots•11mo 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•11mo ago

thanks @MarkBoots - Both variants work like a charm 🙂 I will do some additional research for clip.path and masks.

Gaming

Programming

Skewed Section Seperator - Align with Image