How to make a triangle shape with Tailwind?

Question

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

Facile

Answer 1

You may try using transform:

<link href="https://unpkg.com/tailwindcss@^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>

But using only CSS is easier. All you need is two properties and you can get the code of many triangles from my online collection: https://css-generators.com/triangle-shapes/

Bagehot

Answer 2

You can also try using borders

tailwind playground

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

Oppressive

Answer 3

By pseudo-element (small triangle):

<script src="https://cdn.tailwindcss.com"></script>
<div>small triangle:</div>
<div class="flex gap-x-1">
  <div class="before:content-['▴']"></div>
  <div class="before:content-['▾']"></div>
  <div class="before:content-['◂']"></div>
  <div class="before:content-['▸']"></div>
</div>

---

By pseudo-element (normal triangle):

<script src="https://cdn.tailwindcss.com"></script>

<div>normal triangle:</div>
<div class="flex gap-x-1">
  <div class="before:content-['▲']"></div>
  <div class="before:content-['▼']"></div>
  <div class="before:content-['◀']"></div>
  <div class="before:content-['▶']"></div>
</div>

---

By border:

<script src="https://cdn.tailwindcss.com"></script>
<div>triangle by border</div>
<div class="flex gap-x-3">
  <div class="w-0 h-0 border-8 border-solid border-transparent border-b-black"></div>
  <div class="w-0 h-0 border-8 border-solid border-transparent border-t-black"></div>
  <div class="w-0 h-0 border-8 border-solid border-transparent border-r-black"></div>
  <div class="w-0 h-0 border-8 border-solid border-transparent border-l-black"></div>
</div>

---

By border (simplify):

<script src="https://cdn.tailwindcss.com"></script>

<div>triangle by border (simplify)</div>
<style type="text/tailwindcss">
  @layer components { .triangle { @apply w-0 h-0 border-8 border-solid border-transparent } }
</style>
<div class="flex gap-x-3">
  <div class="triangle border-b-black"></div>
  <div class="triangle border-t-black"></div>
  <div class="triangle border-r-black"></div>
  <div class="triangle border-l-black"></div>
</div>

Isabelleisac

Answer 4

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>

Demo on play.tailwindcss.com

Based on:

• @temani-afif answer
• https://github.com/tesar-tech/BlazorAndTailwind/blob/master/Articles/DropdownMenu/README.md

Axon