如何用 html+css 实现平行四边形,以及气泡

html-css011

如何用 html+css 实现平行四边形,以及气泡,第1张

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>

ul>li{ border:1px solid #ccc  position: relative  line-height:30px}

ul>li::after,ul>li::before{ position: absolute }

 ul>li::after{right:0px bottom:0px content:"" background:url() no-repeat}

 ul>li::before{left:0px top:0px content:"" background:url() no-repeat} <ul>

<li>

曾经我以为我很完美,唯一的缺点是代码写太溜,直到有一天,一群女孩围着我说“你代码写得好溜啊!”,我说“写得溜有什么用,又没人采纳”,她们确骂我,说“你张这么帅,代码还写这么溜,哪个会不采纳你的!”

</li>

</ul>