如何只扭曲背景而不扭曲文字？
<!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>
缥缈止盈浏览 123回答 3
3回答
-
猛跑小猪
也可以这样：<!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> -
慕姐4208626
必须要设置<span>为display:block，方可生效！亲测可用 -
海绵宝宝撒
把背景和文字分成两个不同的元素即可，比如：<!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>
随时随地看视频慕课网APP
相关分类
CSS3