Как сделать треугольник в углу блока контента?

<div style="display: block; position: relative; min-height: 200px; width: 100%; margin: 10 20 10 10px; padding: 10px; border: solid; border-width: 1px; border-color: #e0e0e0; background-image: url(https://perepechki.com/image/back-otzivi.jpg);"><p><a href="http://vk.com/topic-89460103_31797759" target="_blank"><img alt="Отзыв вконтакте" src="http://perepechki.com/image/data/Otzivi/1.jpg" style="width: 150px; height: 150px; border-width: 2px; border-style: solid; border-color: #e0e0e0; margin: 15px; float: left;" /></a>​</p>
<div style="position:absolute; top:0; right:0; width: 0; height: 0; border-top: 40px solid #4a76a8;
border-left: 40px solid transparent;"></div>
<h3><a class="bp_author" href="http://vk.com/topic-89460103_31797759" style="box-sizing: border-box; color: #1a1a1a; text-decoration: none; outline: none; outline-offset: -2px; cursor: pointer; font-weight: bold; line-height: 1.27em; font-family: Open Sans, arial, verdana, sans-serif, 'Lucida Sans'; font-size: 16px; background: transparent;">Ирина Качесова</a></h3>

<p><span style="color: #1a1a1a; font-family: Open Sans, Arial, sans-serif; font-size: 14px; line-height: 1.27em; ">Заказывала на 1 апреля все 4 набора перепечек. Очень вкусно, выглядит необычно :) И что немаловажно в офисе - возиться с этим не надо: не надо резать, перекладывать и прочее :) Спасибо огромное, все съели, адрес попросили :) Удачи вам, ребята, и процветания! :)</span></p></div>
<style type="text/css">
.vkotzivtri {
position:absolute;
display: none;
}
.vkotzivtri:hover {
position:absolute;
display: inline-block;
top:0;
right:0;
width: 0;
height: 0;
border-top: 40px solid #4a76a8;
border-left: 40px solid transparent;
}

</style>
Поделись, если оказалось полезно :)
Нет комментариев

Написать