better way to make this note
i have this note in figma, idk how to make this in html
bg is half-transparent
8 Replies
i started with simple button
now i need to add arrow, and what it would be?
also i have arrow separate
but perhaps it should be whole bg instead separate parts (size of this bg must be dynamic)
Pretty sure you can position the triangle absolutely to the button and then mask it just on the edge where the border radii end
On the triangle's css add:
clip-path: inset(0 0 0 20px)
(Replace 20px with corresponing value)
For position:absolute, you need to have the πΊ inside the button (or a parent div with the same dimentions) whose position is set to relative
Then, set πΊ:
left:calc(100% - 10px);
top:50%;
transform:translateY(-50%);
(Replace 10px in left with needed value to hide the button's border)
No that I think about it you want the arror to be half-transparent...
Will think about it tomorrow. It's late. Good Night/Day wherever you live
If you need the background to be half-transparent, I recommend using an SVG background-image to achieve it. It is possible to do this just with CSS, but it's incredibly complicated.
Courtesy of CSS wizard Temani Afif:
https://www.smashingmagazine.com/2024/03/modern-css-tooltips-speech-bubbles-part1/
https://www.smashingmagazine.com/2024/03/modern-css-tooltips-speech-bubbles-part2/
https://css-generators.com/tooltip-speech-bubble/
The code for how he achieves the effect you're looking for is literally too long to share as a comment on Discord, and that has a fully transparent background; maybe you can put a background colour with 0.5 opacity on there, but no guarantees
I previously did something similar. The dimensions/angles are different, but the same principle applies. https://codepen.io/chooking/pen/JjzMqjV
Thx y'all guys these are perfect solutions
π