CSS Tip 24 – Triangle Shapes #shorts

Subscribe to @NetNinja
Visit for more tips & tricks!


So without a doubt at some point in your Deaf career you're going to need to make A triangle using the CSS like this one Here on the tooltip bubble so I want to Show you how to easily make one so we Already have a div for the tool tip the Bubble of text and then a div above that That we want to style like a triangle Pointing up in the CSS we already have Styles for the tooltip and the bubble Very basic ones we've also got a Selector ready for the arrow now to make A triangle shape we want to set the Width and the height to be zero off both And the shape itself will be made only Using borders so to do this we style Three of the four borders and as a rule Whichever way you want the triangle to Be pointing you don't style that border Just the other three so the first border That we start is the opposite border to Where the triangle should be pointing we Want it to point up so we start the Border bottom first so give it a width You can make this whatever you want the Bigger the value the bigger the triangle I set it to 10 pixels then say solid and Pick a color for the triangle in our Case it's green like the bubble now the Other two borders left and right we need To style as well but this time we want Them to be transparent so we don't see Them their only job is to kind of push In against the bottom border to make it

Triangular but they have to be the same Width as the bottom one and that's it This makes a triangle now I'm just going To use the count function to give the Margin less so it sits in the middle of The bubble as well and now in the Browser we can see that triangle awesome

You May Also Like

Leave a Reply

Your email address will not be published. Required fields are marked *