1、打开html开发软件工具,新建一个html代码页面,创建一个<div>,同时给这个<div>添加一些文本内容和一个class类为 oblique。
2、使用font-style: oblique设置字体倾斜。创建<style>标签,然后在这个标签里面设置oblique类font-style属性为oblique。
代码:
<style>
.oblique{
font-style: oblique
}
</style>
3、最后,可以用链接打开可以看到已经倾斜45度,就是上面的代码编写即可。
把背景和文字分成两个不同的元素即可,比如:
<!doctype html><html>
<head>
<meta charset="utf-8">
<title>无标题文档</title>
<style>
div {
position:relative
}
span.bk {
display: block
width:120pxheight: 110px
background-color: chartreuse
transform:skewY(10deg)
transform:skewX(10deg)
}
span.ft {
position:absolute
left:30px top:30px
width:60pxheight:50px
line-height: 50px
align-self: center
}
</style>
</head>
<body>
<div>
<span class=bk></span>
<span class=ft>TEST</span>
</div>
</body>
</html>