transform: skewX(-45deg)可以形成平行四邊形。但是裡面的內容也會跟著傾斜

解決方案：

巢狀元素方案：對內容再一次應用反向的skew（）變形，從而抵消容器的變形效果。缺點是不得不使用額外的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;
}