Верстка элемента (угол) [дубликат]

169
04 апреля 2019, 14:00

На данный вопрос уже ответили:

  • Как сделать треугольную деформацию блоков кроссбраузерно? 1 ответ

Как можно сверстать такой элемент, в частности нижнюю полосу?

Answer 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>

READ ALSO
Выбор элементов с помощью jquery

Выбор элементов с помощью jquery

Как выбрать с помощью jquery именно 4 последних элемента LI, которые являются, что очевидно, дочерними к UL?

184
Динамичные контейнеры

Динамичные контейнеры

Подскажите, есть к примеру nav и 5 контейнеровКак сделать, чтобы при нажатии на любую ссылку в меню один контейнер убирался, по принципу display...

135
Как подружить jquery validate и анимированный input?

Как подружить jquery validate и анимированный input?

Сталкивался ли кто с такой задачей - нужно скрестить такой вот input https://codepenio/rcauquil/pen/adBGdR с jquery validate() хотя бы примерно, как?

210
Выборка элемента через jquery

Выборка элемента через jquery

Как добавить в POST запрос значение из data-num и результат вернуть в таблицу в место None?

278