如何使用 tailwind css v3 或 vanilla css 制作变形按钮？

Question

我想问一下如何使用 tailwind css 来制作这样的按钮。

我试着把这个按钮做成这样


  <button
    className="bg-tory-blue-500 py-[18px] px-7 rounded-[20px]"
    style={{ boxShadow: "0px 2px 4px 0px #BFEAFF" }}
  >
    Start
  </button>

有人可以帮我吗？

Answer 1

这是我尝试过的最接近的，我使用了两个 div 并将它们倾斜，您可以通过使它们的 bg-color 不同来看到两个 div。

<script src="https://cdn.tailwindcss.com"></script>
<div class="p-4">
  <div class="bg-blue-600 h-10 rounded-xl rounded-br-none absolute -skew-y-6 w-1/5 "></div>
  <div class="bg-blue-600 h-10 absolute rounded-xl rounded-tr-none skew-y-6 mt-5 w-1/5"></div>
 
<button
    class=" pt-[18px] px-7 bg-transparent ml-7 absolute top-3 text-white font-bold text-xl"
>
    Start
  </button>

  </div>

Answer 2

<script src="https://cdn.tailwindcss.com"></script>
<div class="p-4">
  <div class="absolute h-10 w-28 -skew-y-6  rounded-tr-[20px] rounded-l-[20px] rounded-br-none bg-blue-600"></div>
  <div class="absolute top-2 mt-5 h-10 w-28 skew-y-6 rounded-l-[20px] rounded-br-[20px] rounded-tr-none bg-blue-600"></div>
  <button class="absolute left-9 top-7 bg-transparent text-xl font-bold text-white">Start</button>
</div>

如何使用 tailwind css v3 或 vanilla css 制作变形按钮？

How do i make warping button using tailwind css v3 or vanilla css?

css

reactjs

tailwind-css