Não ficou claro para mim como através das instruções indicadas é possível fazer formas no CSS. Por exemplo, por que ao colocar "border-left: 30px solid transparent" (conforme abaixo) se estabelece um formato diagonal na lateral?
div {
border-bottom: 30px solid red;
border-left: 30px solid transparent;
border-right: 30px solid transparent;
border-right: 30px solid transparent;
width: 0;
}
