通过使用：之前和之后的图形格：

Question

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

为此我试图让这个div对称。后部分正常工作，据我所知：

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