【问题标题】:How to make a triangle shape with Tailwind?如何使用 Tailwind 制作三角形?
【发布时间】:2021-07-11 23:10:54
【问题描述】:
<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>

如何在没有插件的情况下使用tailwindCss制作三角形??

【问题讨论】:

    标签: css tailwind-css


    【解决方案1】:

    您可以尝试使用转换:

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

    【讨论】:

      猜你喜欢
      • 1970-01-01
      • 1970-01-01
      • 2013-01-04
      • 1970-01-01
      • 1970-01-01
      • 2022-01-04
      • 1970-01-01
      • 1970-01-01
      • 1970-01-01
      相关资源
      最近更新 更多