уголки с помощью before и after

[ВикторТрошка]

Здравствуйте.

Может кто-нибудь объяснить(или дать ссылку на урок) за счет чего делаются скосы у бордера before или after.

Например, задача из практикума http://jsfiddle.net/TiGR/RkmBD/

Если взять конкретно

ul.steps li:before, ul.steps li:after {
    position:absolute;
    width: 0px;
    height: 0px;
    content:" ";
}
ul.steps li:before {
    border: 15px solid transparent;
    border-left: 5px solid white;
    border-right: 0px solid transparent;

То я понимаю это как белый элемент с видимой белой шириной 5 пикселей и невидимой высотой. В общем уже на бумаге рисую чтобы понять, но никак не пойму механизм.

[Sensei]

Может так понятнее будет? http://jsfiddle.net/bVVmc/1/

[FEL]

вся фишка в

  widht: 0;
  height: 0;

Когда такому элементу задать прозрачный бордер, а потом например левый бордер белым то получится тот самый уголок.

Вот как примерно это выглядит http://jsbin.com/awapoy/1/edit

[ВикторТрошка]

Может так понятнее будет? http://jsfiddle.net/bVVmc/1/

да,спасибо большое, теперь хоть ясно откуда ноги растут

Только не совсем понял почему в последнем примере с рамкой dashed красиво выходит, а если поставить solid то видны линии.

и зачем там text-indent: 150px;

вся фишка в

  widht: 0;
  height: 0;

Когда такому элементу задать прозрачный бордер, а потом например левый бордер белым то получится тот самый уголок.

Вот как примерно это выглядит http://jsbin.com/awapoy/1/edit

спасибо

[Sensei]

На счет рамки, думаю, это баг фаерфокса. А text-indent - это лишнее, забыл убрать.

[SelenIT]

Линии в firefox возникают потому, что он пытается построить плавный переход между цветами, а transparent — это rgba(0,0,0,0), т.е. прозрачный черный. Если поставить rgba(255,255,255,0), то всё ОК.

[Sensei]

Да, про такие тонкости я бы и не подумал. Спасибо SelenIT, буду знать.

[ВикторТрошка]

Линии в firefox возникают потому, что он пытается построить плавный переход между цветами, а transparent — это rgba(0,0,0,0), т.е. прозрачный черный. Если поставить rgba(255,255,255,0), то всё ОК.

благодарю