CSS的transform:skew，如何只扭曲背景而不扭曲文字？谢谢。
<!doctypehtml><html><head><metacharset="utf-8"><title>无标题文档</title><style>span{displa...
<!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);
}
</style>
</head>
<body>
<span>TEST</span>
</body>
</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);
}
</style>
</head>
<body>
<span>TEST</span>
</body>
</html> 展开
3个回答
展开全部
把背景和文字分成两个不同的元素即可，比如：
<!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>
已赞过
已踩过<
评论
收起
你对这个回答的评价是？
展开全部
也可以这样：
<!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>
本回答被提问者采纳
已赞过
已踩过<
评论
收起
你对这个回答的评价是？
展开全部
必须要设置<span>为display:block，方可生效！亲测可用
已赞过
已踩过<
评论
收起
你对这个回答的评价是？
推荐律师服务：
若未解决您的问题，请您详细描述您的问题，通过百度律临进行免费专业咨询
