Испытание 3: товары в каталоге [3/3]

Объясните пожалуйста откуда появляется треугольник справа в .price?
.catalog-items{ width:470px; margin:auto; padding-top:10px; } .catalog-item{ position:relative; display:inline-block; width:218px; margin-right:20px; border:1px solid #ccc; line-height:20px; font-weight:bold; text-align:center; vertical-align:top; background:white; } .catalog-item:nth-child(2){ margin-right:0; } .flag{ position:absolute; top:-1px; right:-1px; width:60px; height:60px; text-indent:-1000px; overflow:hidden; z-index:20; } .flag-new{ background:url("/assets/ifmo/new-flag.png") no-repeat 0 0; } .actions{ position:absolute; top:0; left:0; width:218px; height:88px; padding:40px 0; background-color:rgba(255,255,255,0.9); z-index:10; } .btn{ display:block; width:129px; margin:0 auto; margin-bottom:7px; padding:7px 0; border:3px solid #63a63e; border-bottom-color:#367315; background-color:#63a63e; color:white; font-size:12px; font-weight:normal; font-family:"Tahoma", sans-serif; line-height:18px; text-decoration:none; text-transform:uppercase; border-radius:3px; } .bookmark{ color:#32425c; background:white; border-bottom-color:#63a63e; } .actions:nth-child(1){ display:none; } .image{ width:218px; height:168px; } .title{ min-height:20px; padding:0 20px; margin-top:10px; margin-bottom:15px; } .price{ position:relative; width:80px; margin:10px auto; margin-bottom:20px; padding:10px 30px; color:white; background:#ee3643; border-radius:3px; } .price:after{ content:""; position:absolute; top:0; right:-20px; width:0; height:0; border:20px solid white; border-left-color:#ee3643; }

Это псевдоэлемент. Подробнее приём разбирается тут https://htmlacademy.ru/courses/88/run/25.

1 лайк