How to Make a Triangle Shape with Tailwind?
How to Make a Triangle with tailwindCss Without Plugin? ? 3 Answers You May Try Using Transform: 0 You Can Also Try Using Borders Tailwind Playground Maybe You...
<div class="">
<div class="w-16 h-16 border-b-30 border-l-30 border-solid border-black">
<div class="h-16 w-16 border-t-30 border-r-30 bg-transparent"></div>
</div>
</div>
how to make a triangle with tailwindCss without plugin ??
3 Answers
You may try using transform:
<link href="" rel="stylesheet">
<div class="w-16 overflow-hidden inline-block">
<div class=" h-11 w-11 bg-black rotate-45 transform origin-bottom-left"></div>
</div>
<div class="w-16 overflow-hidden inline-block">
<div class=" h-11 w-11 bg-black -rotate-45 transform origin-top-left"></div>
</div>
<div class="w-11 overflow-hidden inline-block">
<div class=" h-16 bg-black -rotate-45 transform origin-top-right"></div>
</div>
<div class="w-11 overflow-hidden inline-block">
<div class=" h-16 bg-black rotate-45 transform origin-top-left"></div>
</div>
<div class="w-11 overflow-hidden inline-block">
<div class=" h-16 bg-black -rotate-45 transform origin-bottom-right"></div>
</div>
<div class="w-11 overflow-hidden inline-block">
<div class=" h-16 bg-black rotate-45 transform origin-bottom-left"></div>
</div>
<div class="w-11 overflow-hidden inline-block">
<div class=" h-16 bg-black -rotate-45 transform origin-top-left"></div>
</div>
<div class="w-11 overflow-hidden inline-block">
<div class=" h-16 bg-black rotate-45 transform origin-top-right"></div>
</div>You can also try using borders
<!-- down -->
<div class="border-solid border-t-black border-t-8 border-x-transparent border-x-8 border-b-0"></div>
<!-- up -->
<div class="border-solid border-b-black border-b-8 border-x-transparent border-x-8 border-t-0"></div>
<!-- left -->
<div class="border-solid border-r-black border-r-8 border-y-transparent border-y-8 border-l-0"></div>
<!-- right -->
<div class="border-solid border-l-black border-l-8 border-y-transparent border-y-8 border-r-0"></div>
Maybe you want to use the triangle for tooltip. (such search got me here):
<div class="group relative mt-4 ml-4 inline-block">
<button type="button" class="rounded-md border border-neutral-600 px-1">...</button>
<!-- container for triangle and the menu ↓-->
<div class="invisible absolute left-0 -mt-[2px] flex flex-col group-focus-within:visible group-active:visible">
<div class="ml-2 -mb-[1px] inline-block overflow-hidden"> <!-- ← triangle container -->
<!-- triangle ↓ -->
<div class="h-3 w-3 origin-bottom-left rotate-45 transform border border-neutral-500 bg-neutral-100"></div>
</div>
<!-- menu ↓ -->
<div class="flex min-w-max flex-col rounded-md border border-neutral-500 bg-neutral-100 px-2 py-1">
<div class="cursor-pointer hover:underline">Do amazing stuff</div>
<div class="cursor-pointer hover:underline">Go back</div>
</div>
</div>
</div>
Based on:
- @temani-afif answer
Alexander Ross has covered the video game industry for a decade, writing deep dives on game design, esports tournaments, VR developments, and gaming culture.
