TailwindCSS棱角边界

Question

我设法创建了一个边框，该边框按以下方式切割成一个角度( -> )

https://play.tailwindcss.com/b9oILu69my

基本上，我有一个大容器，里面有一个较小的容器，我在里面放置边框，并将底部/右边边框的颜色设置为透明，这样就可以达到我想要的效果。

现在我试图做同样的事情，但是，我希望边框位于右下角，而不是左上角。

我尝试了数百种在操场上显示的代码变体，但都没有效果。

更准确地说，我到底想要实现什么->

详细实例

任何帮助都将不胜感激！

Answer 1

我会采取一种有点不同的方法，通过使用absolute定位的旋转div，在带有overflow-hidden的div中使用。如果您保持主图像(黄色正方形)以m-auto为中心，则两边的边框大小相同。在黄色div上，您需要设置一个z索引，它比旋转div高。

<div class="flex min-h-screen flex-col justify-center overflow-hidden bg-gray-50 py-6 sm:py-12">
  <div class="relative flex m-auto h-40 w-40 overflow-hidden rounded-lg">
    <div class="absolute top-8 left-8 m-auto h-96 w-96 bg-blue-200 rotate-45"></div>
      <div class="top-3 z-30 right-3 m-auto rounded-lg h-32 w-32 bg-yellow-300"></div>
  </div>
</div>

你可以在这里找到我的尾风游乐场的例子。

您可以使用任意值来播放div的高度和宽度，比如w-[48rem]和rotate-[60deg]。

编辑：这个例子看起来更像你的.

希望这能有所帮助。