使用：before和：after选择器绘制div

Question

我试图理解CSS中的:before和:after 。

为此，我试图使这个div对称。 后面的部分按预期工作，AFAIK：

//            up    left  right  bottom
border-width: 500px 80px  0      0;

然后使用border-color模拟/

border-color: transparent green transparent transparent;

检查小提琴

但是当我尝试放置before部分并绘制\\ ，它不起作用

//            up    left  right  bottom
border-width: 500px 0     80px   0;

然后使用border-color模拟/

border-color: transparent transparent green transparent;

完成:before我尝试过:before ：

#liquid:before {
    content: '';
    position: absolute;
    top: 0; left: 0;
    width: 0;
    height: 0;
    border-style: solid;
    border-width: 500px 0 80px 0;
    border-color: transparent transparent green transparent;
    z-index: 10;
}

有人知道如何实现吗？ 更重要的是…… 为什么 ？

Answer 1

为了使其对称，应为：

border-width: 500px 0 0 80px;
border-color: transparent transparent transparent green;

更新示例

#liquid:before {
    content:'';
    position: absolute;
    top: 0;
    left: 0;
    width: 0;
    height: 0;
    border-style: solid;
    border-width: 500px 0 0 80px;
    border-color: transparent transparent transparent green;
    z-index: 10;
}

您使用的是以下内容，它修改了border-bottom而不是border-left ：

border-width: 500px 0 80px 0;
border-color: transparent transparent green transparent;