Kevin Powell - Community•3y ago

Tag shape

How would you guys do this with CSS?
Ignoring the color and font family.

MyndiOP•2/8/23, 10:20 PM

I thought of using clip-path but not sure how I would pull the border correctly.

Jochem•2/8/23, 10:23 PM

you can probably fake the border with a drop shadow

Jochem•2/8/23, 10:23 PM

either that, or a slightly oversized pseudo-element

MyndiOP•2/8/23, 10:24 PM

Mind showing an example? I can't picture it in my mind.

Jochem•2/8/23, 10:29 PM

I'll give it a shot, but I'm not quite a wizard yet >_>

Jochem•2/8/23, 10:56 PM

so it turns out that clip path affects both the before pseudo-element and the box-shadow

MarkBoots•2/8/23, 10:57 PM

do the edges have to be rounded? then it wont be that easy, you could use clippath with polygon and a svg filter to round the edges

Jochem•2/8/23, 10:59 PM

I've got a slightly hacky version working, it uses an extra element though
https://codepen.io/jochemm/pen/BaPebOz

CodePenJochem

Hacky tag shape

...

Jochem•2/8/23, 10:59 PM

you might be able to replace the outer element with the inner one, and put the "chat" text in the content of a pseudo-element, but it's getting late for me so I'm about to head off.

Jochem•2/8/23, 11:02 PM

(also please ignore my abuse of position absolute, I'm trying to kick the habit, and you could probably use grid instead, but this was quicker for me right now and not the focus of the question)

MyndiOP•2/8/23, 11:03 PM

Thanks! I will give it a look.

MMarkBoots do the edges have to be rounded? then it wont be that easy, you could use clippa...

MyndiOP•2/8/23, 11:03 PM

Yeah, basically like the preview.

Jochem•2/8/23, 11:05 PM

if you add a step or two to the right-hand corners in the , it'll probably look rounded enough. The ones on the left side are just

MarkBoots•2/8/23, 11:15 PM

this is with the filter
https://codepen.io/MarkBoots/pen/qByGvww
Still, to make a border work, it has to get another wrapper and a boxshadow

I think it would be much easier to just create a svg to your own liking

CodePenMark Boots

qByGvww

...

MyndiOP•2/8/23, 11:23 PM

Yeah, the image is an SVG, but was wondering if there was a CSS approach

MyndiOP•2/8/23, 11:23 PM

Thanks for the help. I will look into both.

MyndiOP•2/8/23, 11:25 PM

Also, the main problem was the fact that the text would be dynamic.

Rägnar O'ock•2/13/23, 11:13 PM

I would say:

a before with a rotation of 45 deg, a locked width and height of , whatever border-radius you want on all corners, a solid border of x pixels and a border-color only on the right facing sides for the triangle thingy
an after with a border-radius 100vw, same border as the before, a background color matching the backdrop
the same border than both pseudo Elements and the same background-color as the before on the actual element.

Rägnar O'ock•2/13/23, 11:15 PM

and you put the before and after at the right end side of the element and vertically aligned