Drawing div by using :before and :after selector

I’m trying to understand :before and :after in css.

For that I’m trying to make this div symmetric. The after part works as expected, AFAIK:

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

Then with the border-color I simulate the /

border-color: transparent green transparent transparent;

Check the fiddle

But when I try to put the before part and draw a \, it does not work

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

Then with the border-color I simulate the /

border-color: transparent transparent green transparent;

Complete :before I’ve tried:

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

Someone knows how to achieve it? And more important… WHY?


solution

In order to make it symmetric, it should be:

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

You were using the following, which was modifying the border-bottom rather than the border-left:

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