在CSS中绘制斜线

我想做的看起来很简单，但我似乎不知道怎么做

正如你在我的图片中看到的，有两条红线穿过底部，然后向上弯曲靠近右侧

CSS中有没有一种方法可以画出这样一条线

---

您可以使用倾斜变换（

变换：倾斜（Xdeg）

）在CSS中创建有角度的线条。下面是一个示例代码段：

.shape{
高度：50px；
宽度：200px；
底部边框：2倍纯红；
右边框：2倍纯红；
-moz变换：倾斜（-45度）；
-webkit变换：倾斜（-45度）；
变换：倾斜（-45度）；
}

---

你是想要有角度的线条（或者）像截图中那样，在图像上方一行，后面一行？就足够了吗？是的，这给了我足够的信息。如果你把它作为使用歪斜变换的答案发布，我会接受它作为答案。在我看到@Harry的编辑之前，他和@Harry的想法完全一样，可以无限调整大小：）@SherwinFlight-当然是，你想要点什么吗？@SherwinFlight:欢迎你，伙计。我还添加了一个示例，以获得图像中的精确外观（仅包含1个元素）。需要注意的一点是，由于我们正在进行倾斜，倾斜的边框会有点薄，但可以通过使边框比另一个边框更厚来克服。您是否知道如何“切断”DIV的左上角？例如，使其看起来像一张纸，左上角向后折叠或移除。然后您可以像中一样使用

linear gradient

。它对顶部20px使用透明渐变，然后对其余部分使用内容所需的实际背景。即使页面背景是一个图像或另一个渐变，这也会起作用。效果非常好。你是最棒的。非常感谢你！在我看到《哈利》的编辑之前，他正在研究与《哈利》完全相同的想法，可以无限调整大小：）