<html><head>
</head>
<body>
<style>
.box {
width: 150px;
height: 75px;
background-color: rgba(39, 139, 245, 0.8);
color: #fff;
padding: 20px;
position: relative;
margin: 40px;
float: left;-ms-transform: skewY(20deg); /* IE 9 */
transform: skewY(20deg);
}
.box.arrow-right:after {
content: " ";
position: absolute;
right: -15px;
top: 15px;
border-top: 15px solid transparent;
border-right: none;
border-left: 15px solid rgba(39, 139, 245, 0.8);
border-bottom: 15px solid transparent;
-ms-transform: skewY(20deg); /* IE 9 */
transform: skewY(20deg);
}
</style>
<div class="box arrow-right">
Ez egy trendi div
</div>
<br>
<div class="box arrow-right">
Ez egy trendi div
</div>
<div class="box arrow-right">
Ez egy trendi div
</div>
<br>
<div class="box arrow-right">
Ez egy trendi div
</div>
</body></html>
Példa:Katt Ide
|