css如何将一排文字倾斜45°,请高手指点

html-css06

css如何将一排文字倾斜45°,请高手指点,第1张

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>