Hey, Pls I am struggling to create a border as shown in the picture below, if there is any other way to go about it, I would really appreciate it.
Hi,
There are multiple ways to create something like this but one of the ways i like to do it is by simply using a div as a triangle.
Here is how it works give the parent div a position relative and a border with 2px width and #96D2A4 for border color, give it a background color of white(or whatever background color your site has). After that put your text inside this div.
finally we can create our triangle by giving it a border bottom and right of 2px with the same color, rotating it on z-axis by 45deg, border-radius bottom right of 5px(or more of you want to make it have more curve), background color of white, position absolute with bottom of -11px and left of 30px with z-index of 5 and a width and height of 20px.
here is my version of it
2 Likes
I also gave the parent element some min height and width and margin just to make it look better
1 Like
response deleted by @Stan
1 Like
thanks a lot. you are a life saver.
1 Like