How to make a triangle shape with Tailwind?

Issue

<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 ??

Solution

You may try using transform:

<link href="https://unpkg.com/[email protected]^2/dist/tailwind.min.css" 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>

Answered By – Temani Afif

This Answer collected from stackoverflow, is licensed under cc by-sa 2.5 , cc by-sa 3.0 and cc by-sa 4.0

Leave a Reply

(*) Required, Your email will not be published