Как можно сверстать такой элемент, в частности нижнюю полосу?
1 ответ
как то так)
.block {
position: relative;
width: 218px;
}
.hover {
position: absolute;
top: 0;
left: 0;
height: 24px;
color: #fff;
background: rgba(0,0,0,0.5);
width: 100%;
z-index: 10;
}
.hover span {
background: #FBD232;
float: right;
text-align: right;
padding: 3px 5px;
position: relative;
color: #000;
}
.hover span:before {
height: 0px;
border-top: 12px solid transparent;
border-right: 12px solid #FBD232;
border-bottom: 12px solid transparent;
content: "";
top: 0;
left: -12px;
position: absolute;
width: 0;
}
<div class="block">
<img src="https://i.stack.imgur.com/QxeKS.png" />
<div class="hover">Простые <span>от 800 Р</span></div>
</div>