TailwindCSS 如何实现一个三角形？

10 个月前提问

6 个月前修改

浏览次数276次

5个答案

在Tailwind CSS中，创建一个三角形通常涉及到利用边框属性来实现。三角形的形成其实是利用了一个小技巧：当一个元素的宽度和高度被设置为0，同时它的边框被设置不同的颜色，其中三个边框透明，另一个边框设置颜色时，这个元素就会看起来像是一个三角形。

下面是一个具体的步骤和代码示例，展示如何使用Tailwind CSS来创建一个向上指的三角形：

创建一个div，给它一个宽度和高度都为0的类。
应用边框宽度类到这个div上，这个宽度将决定了三角形的大小。
给div的三个边框设置透明颜色，给剩下的一个边框设置一个实际的颜色。

以下是一个实现上述步骤的Tailwind CSS代码示例：

html
<!-- 创建一个向上指的三角形 -->
<div class="w-0 h-0 border-l-8 border-r-8 border-b-8 border-l-transparent border-r-transparent border-b-indigo-600"></div>

在这个例子中：

w-0 和 h-0 类设置元素宽度和高度为0。
border-l-8 和 border-r-8 类设置左右边框宽度为8个单位，这里的单位根据你的Tailwind CSS配置而定，通常是以px为单位。
border-b-8 类设置下边框宽度，这个宽度实际上决定了三角形的大小。
border-l-transparent 和 border-r-transparent 类将左右边框设置为透明。
border-b-indigo-600 类设置下边框颜色为indigo（靛蓝色），这将成为三角形的颜色。

可以根据你的需求调整边框的宽度和颜色类，来改变三角形的大小和颜色。如果你需要不同方向的三角形（向下、向左、向右指的三角形），只需调整哪个边框是可见的，哪三个是透明的即可。

2024年6月29日 12:07 回复

您可以尝试使用转换：

显示代码片段

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

Run code snippetHide results

Expand snippet

但仅使用 CSS 会更容易。您所需要的只是两个属性，您可以从这里获取许多三角形的代码： https: //css-generators.com/triangle-shapes/

2024年6月29日 12:07 回复

您也可以尝试使用边框

顺风游乐场

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

2024年6月29日 12:07 回复

通过伪元素（小三角形）：

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

运行代码片段Hide results

展开片段

通过伪元素（普通三角形）：

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

运行代码片段Hide results

展开片段

按边界：

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

运行代码片段Hide results

展开片段

按边界（简化）：

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

运行代码片段Hide results

展开片段

2024年6月29日 12:07 回复

也许您想使用三角形作为工具提示。（这样的搜索让我来到这里）：

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

play.tailwindcss.com 上的演示

基于：

2024年6月29日 12:07 回复

TailwindCSS 如何实现一个三角形？

5个答案

你的答案