<!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>
div{
float: left;
margin: 20px;
text-align: center;
line-height: 500px;
font-size: 30px;
color: palegreen;
}
.div {
width: 500px;
height: 500px;
background: linear-gradient(-45deg, transparent 15px, #0063f0 0) bottom right,
linear-gradient(-135deg, transparent 15px, #0063f0 0) top right,
linear-gradient(135deg, transparent 15px, #0063f0 0) top left,
linear-gradient(45deg, transparent 15px, #0063f0 0) bottom left;
background-repeat: repeat, repeat, repeat, repeat;
background-size: auto, auto, auto, auto;
background-size: 50% 51%;
background-repeat: no-repeat;
opacity: 0.9;
position: relative;
}
.div::after {
content: " ";
display: block;
position: absolute;
width: calc(100% - 2px); // 选择要留多少边框线
height: calc(100% - 2px);
left:50%;
top: 50%;
transform: translate(-50%, -50%);
z-index: -1;
background: linear-gradient(-45deg, transparent 15px, #fff 0) bottom right,
linear-gradient(-135deg, transparent 15px, #fff 0) top right,
linear-gradient(135deg, transparent 15px, #fff 0) top left,
linear-gradient(45deg, transparent 15px, #fff 0) bottom left;
background-repeat: repeat, repeat, repeat, repeat;
background-size: auto, auto, auto, auto;
background-size: 50% 51%;
background-repeat: no-repeat;
}
.div1{
width: 500px;
height: 500px;
background: linear-gradient(135deg, transparent 15px, rgb(63, 167, 207) 0) top left,
linear-gradient(-135deg, transparent 15px, rgb(63, 167, 207) 0) top right,
linear-gradient(-45deg, transparent 15px, rgb(63, 167, 207) 0) bottom right,
linear-gradient(45deg, transparent 15px,rgb(63, 167, 207) 0) bottom left;
background-size: 50% 50%;
background-repeat: no-repeat;
opacity: 0.9;
}
.div2 {
width: 500px;
height: 500px;
background: #0063f0;
clip-path: polygon(
20px 0,
calc(100% - 20px) 0,
100% 20px,
100% calc(100% - 20px),
calc(100% - 20px) 100%,
20px 100%,
0 calc(100% - 20px),
0 20px
);
}
.div3 {
width: 500px;
height: 500px;
background: rgb(63, 167, 207);
background: radial-gradient( circle at top left, transparent 15px, rgb(63, 167, 207) 0) top left,
radial-gradient(circle at top right, transparent 15px, rgb(63, 167, 207) 0) top right,
radial-gradient( circle at bottom right, transparent 15px, rgb(63, 167, 207) 0) bottom right,
radial-gradient( circle at bottom left, transparent 15px, rgb(63, 167, 207) 0) bottom left;
background-size: 50% 50%;
background-repeat: no-repeat;
}
</style>
</head>
<body>
<div class="div">div</div>
<div class="div1">div1</div>
<div class="div2">div2</div>
<div class="div3">div3</div>
</body>
</html>