CSS3实现平行四边形

变换：skewX（-45deg）可以形成平行四边形。但是里面的内容也会跟着倾斜

解决方案：

嵌套元素方案：对内容再一次应用反向的歪斜（）变形，从而抵消容器的变形效果缺点是不得不使用额外的HTML元素包裹内容 

div{
    transform: skewX(-45deg)
}
div>div{
    transform: skewX(45deg)
}

<div>
    <div>平行四边形</div>
</div>

伪元素方案：把所用样式（背景，边框）应用到伪元素上，对伪元素进行变形。

div{
	position: relative;
    /*文字颜色、内边距等样式*/
}
div:after{
	position: absolute;
	content: '';
	z-index: -1;/*堆叠层推到宿主元素后面，避免遮住内容*/
	background-color: yellow;
	left: 0;top: 0;bottom: 0;right: 0;
	transform: skew(-45deg);
}

伪元素方案还适用于其他任何变形样式，当我们想让一个元素变形而不想让他的内容变形式，就是用伪元素！

1.边框内圆角

div{
	display: inline-block;
	height: 50px;
	width: 160px;
	text-align: center;
	line-height: 50px;
	font-weight: bold;
	position: relative;
	border: 7px solid red;
}
div:after{
	position: absolute;
	content: '';
	z-index: -1;
	background-color: yellow;
	left: 0;
	top: 0;
	bottom: 0;
	right: 0;
	border-radius: 17px;
}
div:before{
	position: absolute;
	content: '';
	z-index: -2;
	background-color: red;
	left: 0;
	top: 0;
	bottom: 0;
	right: 0;
}