CSS的transform:skew,如何只扭曲背景而不扭曲文字?谢谢。
发布网友
发布时间：2022-05-14 00:52
共3个回答
热心网友
时间：2022-05-14 02:22
把背景和文字分成两个不同的元素即可，比如：
<!doctype html><html>
<head>
<meta charset="utf-8">
<title>无标题文档</title>
<style>
div {
position:relative;
}
span.bk {
display: block;
width:120px;height: 110px;
background-color: chartreuse;
transform:skewY(10deg);
transform:skewX(10deg);
}
span.ft {
position:absolute;
left:30px; top:30px;
width:60px;height:50px;
line-height: 50px;
align-self: center;
}
</style>
</head>
<body>
<div>
<span class=bk></span>
<span class=ft>TEST</span>
</div>
</body>
</html>
热心网友
时间：2022-05-14 03:40
也可以这样：
<!doctype html><html>
<head>
<meta charset="utf-8">
<title>无标题文档</title>
<style>
span{
display: block;
width:60px;height: 50px;
line-height: 50px;
align-self: center;
padding: 30px;
background-color: chartreuse;
transform:skewY(10deg);
transform:skewX(10deg);
}
b{
display: block;
transform:skewY(-10deg);
transform:skewX(-10deg);
}
</style>
</head>
<body>
<span><b>TEST</b></span>
</body>
</html>
热心网友
时间：2022-05-14 05:14
