<!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>
3 回答
猛跑小猪
TA贡献1858条经验 获得超8个赞
也可以这样：
<!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> |
海绵宝宝撒
TA贡献1809条经验 获得超8个赞
把背景和文字分成两个不同的元素即可，比如：
<!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> |
- 3 回答
- 0 关注
- 155 浏览
添加回答
举报
0/150
提交
取消