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

i want to ask how to make this button like this using tailwind css.

i tried making this button like this


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

can someone help me?

CodePudding user response：

This is the closest I tried, I had used two divs and skewed them, you can see both the divs by making the bg-color of them different.

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

  </div>