一、Css 斜线，块斜线，对角线
块的宽度高度任意支持
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
/* 1 */
.block {
height: 100px;
border: 1px solid red;
position: relative;
overflow: hidden;
}
.block::before {
content: '';
position: absolute;
width: 0;
height: 0;
left: 0px;
top: 0;
width: 100%;
height: 100%;
background: linear-gradient(to right top, #00f 50%, #fff 50%);
}
.block::after {
content: '';
position: absolute;
width: 0;
height: 0;
left: -1px;
top: 1px;
width: 100%;
height: 100%;
background: linear-gradient(to right top, #fff 50%, transparent 50%);
}
</style>
</head>
<body>
<div class="block"></div>
</body>
</html>
二、Css 斜线对角线，正方形对角线推荐
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
/* 2 */
.block2 {
height: 100px;
width: 100px;
position: relative;
overflow: hidden;
background: yellow;
margin: 50px auto;
}
/* 2.1 */
.block2::after {
content: '';
position: absolute;
left: 50%;
top: 50%;
height: 150px;
width: 1px;
background: #888888;
transform: translate(-50%, -50%) rotate(-45deg);
}
</style>
</head>
<body>
<div class="block2"></div>
</body>
</html>
三、css 对角线，渐变实现，粗细度不好控制，宽高不能太大
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
/* 3 */
.block3 {
box-sizing: border-box;
background: yellowgreen;
width: 200px;
text-align: center;
margin: auto;
padding: 100px 0px;
position: relative;
}
.block3::after {
content: '';
position: absolute;
left: 0;
top: 0;
width: 100%;
height: 100%;
background: linear-gradient(to right top, transparent 49%, #000, transparent 50%);
}
</style>
</head>
<body>
<div class="block3">
张三丰的店
</div>
</body>
</html>
更多：
Css 修改图标颜色_Css 修改图片颜色_Css控制图片颜色
Css3 将网页变成黑白_Css3 网页黑白滤镜filter
标签：斜线,top,50%,height,width,对角线,position,Css From： https://www.cnblogs.com/tianma3798/p/18401698