<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width,height=device-height">
<title>css斜切角 斜边 倒角</title>
<style>
.m-test {
width: 100px;
height: 16px;
background: linear-gradient(135deg, transparent 5px, #1e1e1e 0) top left,
linear-gradient(-135deg, transparent 0px, #1e1e1e 0) top right,
linear-gradient(-45deg, transparent 0px, #1e1e1e 0) bottom right,
linear-gradient(45deg, transparent 5px, #1e1e1e 0) bottom left;
background-size: 50% 50%;
background-repeat: no-repeat;
}
</style>
</head>
<body>
<div class="m-test"></div>
</body>
</html>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width,height=device-height">
<title>css斜切角 斜边 倒角</title>
<style>
.m-test {
width: 100px;
height: 16px;
background: linear-gradient(135deg, transparent 5px, #1e1e1e 0) top left,
linear-gradient(-135deg, transparent 0px, #1e1e1e 0) top right,
linear-gradient(-45deg, transparent 0px, #1e1e1e 0) bottom right,
linear-gradient(45deg, transparent 5px, #1e1e1e 0) bottom left;
background-size: 50% 50%;
background-repeat: no-repeat;
}
</style>
</head>
<body>
<div class="m-test"></div>
</body>
</html>
