Question

我想创建一个右边框的侧面板，顶部几乎为0px，但底部逐渐增加到5px。

我正在尝试避免使用边框图像，因为我想使用最少的外部资源，例如图像。

我该怎么做？我试图搜索很多，但找不到它。所以，如果有人能指出我一个类似的问题，那也很有帮助。

如果您注意到，左侧是左侧面板右侧（左侧是图像）的米色边框，其长度可变。

Answer 1

您可以在容器div上使用伪后元素，然后在该after元素上使用边框来创建三角形。

.box::after{
    border-right: 300px solid transparent;
    border-left: 5px solid transparent;
    border-bottom: 300px solid #666666;
}