Я пытаюсь создать наклонный div, и везде, где я смотрел, я только что нашел, как это сделать, используя границу каких-то родов, которая не будет работать, потому что div будет размещаться над верхней частью изображения.
Итак, код на данный момент выглядит следующим образом: Bootstrap:
<div class="thumbnail">
<a href="#">
<img class="img-responsive" src="banner.jpg">
<h3 class="headline-badge">slanted div text</h3>
</a>
</div>
И это соответствующий CSS:
.thumbnail img.img-responsive {
width: 100%;
border-top-left-radius: 4px;
border-top-right-radius: 4px;
}
.headline-badge {
color: #fff;
margin-top: 0;
padding: 2%;
position: absolute;
top: 0;
left: 0;
overflow: hidden;
background-color: #000;
}
Итак, я хочу создать наклон в верхнем правом углу. Я пробовал использовать границу с небольшим или никаким успехом, и всякий раз, когда я пытался сделать прозрачную границу, она не отображала границу.
Есть ли у кого-нибудь идеи о том, как создать это с помощью CSS? Я считаю, что он также должен быть отзывчивым, что является серьезной проблемой, поскольку наклон не может быть просто фиксированной высотой/шириной.
Наклон должен быть около 45 градусов, и только с правой стороны div. Текст не должен выполняться наклонным.
Эффект должен быть похож на этот:
http://jsfiddle.net/webtiki/yLu1sxmj/
Спасибо за публикацию этой скрипки, но мне нужно на самом деле добавить текст в div, и ваше решение затрудняет это, как показывают комментарии в ответе. Наклон также должен был бы наклон вверх, а не вниз, и я изо всех сил старался сделать это, не воздействуя на левую часть div. В вашем примере я не мог понять, как добавить текст поверх div, хотя я боюсь.