Question

我试图了解css中的:before和:after。

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

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

然后使用border-color我模拟/

border-color: transparent green transparent transparent;

Check the fiddle

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

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

然后使用border-color我模拟/

border-color: transparent transparent green transparent;

完成: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;

Updated Example

#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;

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

1 个答案: