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

html-css023

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

transform:skewX(30deg)

扭曲skew()函数能够让元素倾斜显示。它可以将一个对象以其中心位置围绕着X轴和Y轴按照一定的角度倾斜。这与rotate()函数的旋转不同,rotate()函数只是旋转,而不会改变

元素的形状。skew()函数不会旋转,而只会改变元素的形状。

一个参数:表示水平方向的倾斜角度;

两个参数:第一个参数表示水平方向的倾斜角度,第二个参数表示垂直方向的倾斜角度

气泡需要两个组合

这是用css+html实现的,不是公众号自带的功能。先用制作网页的软件设计出来,然后把效果复制粘贴到公众号编辑器,就可以实现。想要自己设计就需要有一点css代码基础,也有一些现成的可以直接抄来用。你从别人帐号上直接复制过来,并不是通用的HTML格式,当然不能用了。要提取代码自己另存才可以的。

.arrow_box {

position: relative

background: #88b7d5

border: 4px solid #c2e1f5

}

.arrow_box:after, .arrow_box:before {

left: 100%

top: 50%

border: solid transparent

content: " "

height: 0

width: 0

position: absolute

pointer-events: none

}

.arrow_box:after {

border-color: rgba(136, 183, 213, 0)

border-left-color: #88b7d5

border-width: 10px

margin-top: -10px

}

.arrow_box:before {

border-color: rgba(194, 225, 245, 0)

border-left-color: #c2e1f5

border-width: 16px

margin-top: -16px

}