How to make a triangle shape with Tailwind?

<div> <div> <div></div> </div>
</div>

how to make a triangle with tailwindCss without plugin ??

3 Answers

You may try using transform:

<link href="" rel="stylesheet">
<div> <div></div>
</div>
<div> <div></div>
</div>
<div> <div></div>
</div>
<div> <div></div>
</div>
<div> <div></div>
</div>
<div> <div></div>
</div>
<div> <div></div>
</div>
<div> <div></div>
</div>

You can also try using borders

tailwind playground

<!-- down -->
<div></div>
<!-- up -->
<div></div>
<!-- left -->
<div></div>
<!-- right -->
<div></div>

Maybe you want to use the triangle for tooltip. (such search got me here):

<div> <button type="button">...</button> <!-- container for triangle and the menu ↓--> <div> <div> <!-- ← triangle container --> <!-- triangle ↓ --> <div></div> </div> <!-- menu ↓ --> <div> <div>Do amazing stuff</div> <div>Go back</div> </div> </div>
</div>

Demo on play.tailwindcss.com

Based on:

• @temani-afif answer