Красивый дизайн, который идет на материал в виде ленточки, где можно сделать под новый материал или как на одном популярном браузере идет в закладки. Теперь вы как веб мастер можете выставить вертикальную ленту и закрепить ее к виду материалу или к изображению, вообще к тому, где нужно обозначение, где ленточка подойдет под функцию.
Эффект ленты CSS очень легко создать с помощью CSS, где техника использует только на стилях, без лишнего HTML или изображений, что идет под разную палитру цвета, а значит можно выставить на темном или светлом формате сайта.
Основной HTML прост и понятен:
Код
<div style="padding:38px 0;max-width:517px;margin: auto;">
<div class="kugesating-ceranspagen">
<span class="katusating-cerankin"></span>
<div class="kugesating-ceranspagen-desamipob">
<h3>ZorNet - портал для вебмастера</h3>
<p>Здесь идет описание, которое можно задействовать в тематическом направление.</p>
</div>
</div>
</div>
CSS
Код
.kugesating-ceranspagen {
background-color: #f5f5f5;
border-radius: 3px;
color: #565454;
padding: 15px 15px 15px 75px;
position: relative;
}
.kugesating-ceranspagen h3 {
margin: 0 0 0.24em 0;
font-size: 27px;
font-weight: 400;
line-height: 1.3;
color: #252323;
}
.kugesating-ceranspagen .kugesating-ceranspagen-desamipob p {
margin: 0 0 1em;
}
.kugesating-ceranspagen .kugesating-ceranspagen-desamipob > p:last-child {
margin-bottom: 0;
}
.kugesating-ceranspagen.kugesating-ceranspagen-desamipob p a {
color: #399fd2;
}
.kugesating-ceranspagen .kugesating-ceranspagen-desamipob p a:hover {
color: #3a3636;
}
.kugesating-ceranspagen .katusating-cerankin {
display: inline-block;
position: absolute;
left: 17px;
top: 37.5px;
}
.kugesating-ceranspagen .katusating-cerankin:before,
.kugesating-ceranspagen .katusating-cerankin:after {
content: "";
display: block;
position: absolute;
height: 10px;
bottom: -8px;
border: 18px solid #53b0de;
}
.kugesating-ceranspagen .katusating-cerankin:before {
border-bottom-color: transparent;
bottom: -40px;
}
Углы создаются путем установки прозрачного border-bottom-color свойства :before селектора.
Демонстрация
