css-shapes 相关问题

<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制作三角形？您可以尝试使用变换： <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> 但是仅使用 CSS 更容易。您所需要的只是两个属性，您可以从这里获取许多三角形的代码：https://css-generators.com/triangle-shapes/ 您也可以尝试使用边框顺风游乐场  <div class="border-solid border-t-black border-t-8 border-x-transparent border-x-8 border-b-0"></div>  <div class="border-solid border-b-black border-b-8 border-x-transparent border-x-8 border-t-0"></div>  <div class="border-solid border-r-black border-r-8 border-y-transparent border-y-8 border-l-0"></div>  <div class="border-solid border-l-black border-l-8 border-y-transparent border-y-8 border-r-0"></div> 通过伪元素（小三角形）： <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> 通过伪元素（普通三角形）： <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> 按边界： <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> 按边界（简化）： <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> 也许您想使用三角形作为工具提示。（这样的搜索让我来到这里）： <div class="group relative mt-4 ml-4 inline-block"> <button type="button" class="rounded-md border border-neutral-600 px-1">...</button>  <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">   <div class="h-3 w-3 origin-bottom-left rotate-45 transform border border-neutral-500 bg-neutral-100"></div> </div>  <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 上的演示基于： @temani-afif 答案 https://github.com/tesar-tech/BlazorAndTailwind/blob/master/Articles/DropdownMenu/README.md

css tailwind-css css-shapes

回答 4 投票 0

如何创建弯曲的语音气泡？

我正在尝试用 div 制作一个弯曲的语音气泡，如下所示：这是我尝试过的，但实际上并不起作用： .userMsgBottom{ 位置：相对；显示：内联块；最大宽度：...

html css css-shapes

回答 1 投票 0

CSS 从矩形中剪出圆形

我设法实现了这种效果：http://jsfiddle.net/6z3msdwf/1/，但我对标记不太满意。另外，IE 10/11 中存在一个奇怪的错误，当您调整 win 大小时会显示 1px 间隙...

html css css-shapes

回答 3 投票 0

3D盒子阴影效果

所以我知道如何用CSS3做一个基本的盒子阴影。您可以在下图的顶部看到这一点。我想要实现的效果是一个3D盒子阴影，如下图底部所示...