Kevin Powell - CommunityKP-C
Kevin Powell - Community•6mo ago•
66 replies
bibamann

diagonal borders

Well, I tried 

<div class="top"></div>
<div
  class="text"
  v-html="element.frontendText.body"
/>
<div class="bottom"></div>

.top {
  width: 100%;
  height: 50px;
  background: var(--color-primary);
  clip-path: polygon(100% 0, 0 100%, 100% 100%);
}

.bottom {
  width: 100%;
  height: 50px;
  background: var(--color-primary);
  clip-path: polygon(100% -1px, 0 -1px, 0 100%);
}

.text {
  background: var(--color-primary);
  color: #fff;
  padding: 1rem;
}


But as you can see, on the top one it works, on the bottom one you've get the 1px "spacing".
I mean I could try to overshoot the top one like I did the bottom on with "-1px" - but this results also in that the diagonal ends to "soon" on the right (see the bottom) - unless I "fix this better". But this looks to be a bit dirty to me.

So any idea how to fix it or different approach (and it's still antialiased)? I'm not sure with SVGs if you could style them with CSS (fill color and maybe optional height).

Maybe working with :before / after und before goes into negative values? The elements come within a loop - so they maybe overlap then - and I need to link the anchors (ids) or their parent
Bildschirmfoto_2025-07-28_um_11.32.21.png
Was this page helpful?