.featureBanner {
position: relative;
margin: 20px
}
.featureBanner:before {
content: "Featured";
position: absolute;
top: 5px;
left: -8px;
padding-right: 10px;
color: #232323;
font-weight: bold;
height: 0px;
border: 15px solid #ffa200;
border-right-color: transparent;
line-height: 0px;
box-shadow: -0px 5px 5px -5px #000;
z-index: 1;
}
 
.featureBanner:after {
content: "";
position: absolute;
top: 35px;
left: -8px;
border: 4px solid #89540c;
border-left-color: transparent;
border-bottom-color: transparent;
}

Для повторения этого эффекта в других браузерах вам бы понадобилось установить фоновое изображение. Но в поддерживающих CSS3 движках можно сгенерировать динамичные баннеры, свисающие с края оберток контента, и все это без изображений! Они хорошо смотрятся, будучи привешенными к продуктам электронной коммерции, изображениям-миниатюрам, видеопревью или статьям блогов, и это лишь некоторые из идей.

Добавлено: 12 Апреля 2018 07:35:12 Добавил: Андрей Ковальчук Нравится 0

Добавить