13 Replies
I thought of using clip-path but not sure how I would pull the border correctly.
you can probably fake the border with a drop shadow
either that, or a slightly oversized pseudo-element
Mind showing an example? I can't picture it in my mind.
I'll give it a shot, but I'm not quite a wizard yet >_>
so it turns out that clip path affects both the before pseudo-element and the box-shadow
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
I've got a slightly hacky version working, it uses an extra element though
https://codepen.io/jochemm/pen/BaPebOz
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.
(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)
Thanks! I will give it a look.
Yeah, basically like the preview.
if you add a step or two to the right-hand corners in the
polygon, it'll probably look rounded enough. The ones on the left side are just border-radiusthis 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
Yeah, the image is an SVG, but was wondering if there was a CSS approach 😅
Thanks for the help. I will look into both.
Also, the main problem was the fact that the text would be dynamic.
Unknown User•16mo ago
Message Not Public
Sign In & Join Server To View
I would say:
- a before with a rotation of 45 deg, a locked width and height of
√2 * parent height, 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.
and you put the before and after at the right end side of the element and vertically aligned