transform:skewX(30deg)
扭曲skew()函数能够让元素倾斜显示。它可以将一个对象以其中心位置围绕着X轴和Y轴按照一定的角度倾斜。这与rotate()函数的旋转不同,rotate()函数只是旋转,而不会改变
元素的形状。skew()函数不会旋转,而只会改变元素的形状。
一个参数:表示水平方向的倾斜角度;
两个参数:第一个参数表示水平方向的倾斜角度,第二个参数表示垂直方向的倾斜角度
气泡需要两个组合
<div class="send"><div class="arrow"></div>
</div>
<style type="text/css">
body {
background:#4D4948
}
.send {
position:relative
width:150px
height:35px
background:#F8C301
border-radius:5px /* 圆角 */
margin:30px auto 0
}
.send .arrow {
position:absolute
top:5px
right:-16px /* 圆角的位置需要细心调试哦 */
width:0
height:0
font-size:0
border:solid 8px
border-color:#4D4948 #4D4948 #4D4948 #F8C301
}
</style>