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;
}

<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

41 Replies

ἔρως•4w ago

how about you make a triangle with ::before and ::after? that has been possible to do since ever, and you can easily find the code online

bibamannOP•4w ago

I dont know if clip-patch also works there

ἔρως•4w ago

it's one google search away it does, but dont overcomplicate also, the support for css triangles is much better

bibamannOP•4w ago

hm ok. I wont be just triangles, but also other shapes So I think I need to go that polygon or svg way

ἔρως•4w ago

yeah, but for the triangle, just dont overcomplicate

bibamannOP•4w ago

maybe I should change the topic to "polygonic borders" Problem is that 1 blank line which is maybe because of rounding problems

Kingpin•4w ago

I see v-html is this vue?

bibamannOP•4w ago

yes

Kingpin•4w ago

Aha

bibamannOP•4w ago

nuxt3

Kingpin•4w ago

But for you problem maybe try border-image and have a svg with your desired shape?

bibamannOP•4w ago

can you set the background color of svgs via css?

Kingpin•4w ago

For background color you can just use regular css.

bibamannOP•4w ago

not sure about that - just did "pure svg" editing in html so far so the fill color

Kingpin•4w ago

Like only do the outlining using the svg. You can always use the full shape and position the text absolute on top of it. But that's gonna get tricky to be responsive I think. If you add the svg inline you can style the svg,path etc tags. I think border-image is the more elegant solution but a little trickier to get right. And the position absolute one more bruud forced kinda. I mean border-image is for the border only. The background is handled seperatly.

bibamannOP•4w ago

hmm... well all the stuff will come from a cms where people can say "this border style at this color" much stuff to do then

Kingpin•4w ago

You can do the border-image inline inside the html and allow people to upload svg for border.

bibamannOP•4w ago

well they just get a choce of like 4-5 border styles

Kingpin•4w ago

For the absolute solution you just gotta use the solution to render the svg as svg from the CMS. You got a dropdown element?

bibamannOP•4w ago

Yes element style gets submitted and added as css classes

Kingpin•4w ago

Name them appropiate, and then use the dropdown so the client can decide what shape they want. If you use BEM notation for css you can do the border-image svg per modifier. What CMS are you using?

bibamannOP•4w ago

I use BEM - a bit self written one

Kingpin•4w ago

Doesnt have to be BEM but you can do similar. BEM is self written tho. Like c-section c-section--heart would create the section with a heart border. The dropdown could have a option 'heart' for the client to chose.

bibamannOP•4w ago

the cms is a self written one. Well I use BEM - mainly just for modifiers - elements I never know and are a bit unnecessary when you do the style scoped in the components

Kingpin•4w ago

You replace heart with a variable that comes from the CMS. You can do that with vue right? Directly manipulate the css using js variables? c-section c-section--${variable}. Something like this.

bibamannOP•4w ago

card__inner
card__inner__dropdown
card__inner__dropdown__element

card__inner
card__inner__dropdown
card__inner__dropdown__element

Kingpin•4w ago

That's not how you use BEM

bibamannOP•4w ago

card__inner__dropdown__element--active

card__inner__dropdown__element--active

so for elements I never know where to cut the element

Kingpin•4w ago

c-card__inner
c-card__dropdown
c-card__element

c-card__inner
c-card__dropdown
c-card__element

You use modifiers to slightly alternate the styles. Let's say you have a badge per categorie this badge has a different color then you can do c-badge c-badge--${category}

bibamannOP•4w ago

but with scoped styling you barely need to use bem

Kingpin•4w ago

Still if you use it you should use it correctly. BEM is a solution for specifity problems. If you use BEM properly you almost never run into a spicifity issue.

bibamannOP•4w ago

<div class=card>
  <div class=card__inner>
     <div class=card__inner__text />
     <div class=card_inner__dropdown />
   <div class=card__outer>

(closing divs)

<div class=card>
  <div class=card__inner>
     <div class=card__inner__text />
     <div class=card_inner__dropdown />
   <div class=card__outer>

(closing divs)

Kingpin•4w ago

Oh no You don't have to repeat the inner everytime.

bibamannOP•4w ago

damn double _ 😄

Kingpin•4w ago

Wait it's how https://en.bem.info/methodology/quick-start/ Bem.info describes it as well....

Quick start

Kingpin•4w ago

The way you do it

bibamannOP•4w ago

well, however - I usually go with component styling and just put common stuff like colors, fonts, standard paddings in a global css and with component styling you don't really need bem

Kingpin•4w ago

An element is always part of a block, not another element. This means that element names can't define a hierarchy such as blockelem1elem2.

Nvm

<div class="block">
    <div class="block__elem1">
        <div class="block__elem2">
            <div class="block__elem3"></div>
        </div>
    </div>
</div>

<div class="block">
    <div class="block__elem1">
        <div class="block__elem2">
            <div class="block__elem3"></div>
        </div>
    </div>
</div>

bibamannOP•4w ago

however - that clip path - sometimes rounding a pixel false (at least I think it does) - that on topelement in my screenshot it works, bottom it gets suddenly a white line. so try svgs as they're more accurate? And I can set the fill-color by css classses? .top--blue, top--grey, ... background isn't always white - so inverse the shape wouldn't work as well I think

capt_uhu•4w ago

i've run into that "one pixel off" (sometimes it seems like it might be less than one pixel) positioning issue a few times. Seems to mostly happen for me in just Firefox. In my experience it doesn't really matter what I use to add the shape on (another element or pseudo or svg etc) it's always there. So what i tend to do instead is cut the shape out of an over sized element. In this case add padding to top and bottom then then clip-path the whole element. https://codepen.io/jsnkuhn/pen/RNWowdw

Jason Kuhn

CodePen

Untitled

...

bibamannOP•3w ago

@jsnkuhn thx! I tried it with some "-1px stuff" to get rid off the 1px rounding error.

Gaming

Programming

diagonal borders

Did you find this page helpful?