<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<style>
.custom-border {
width: 300px;
height: 150px;
border: 2px solid #00ffff;
position: relative;
box-sizing: border-box;
}
.custom-border::before,
.custom-border::after {
content: "";
display: block;
position: absolute;
width: 0;
height: 0;
width: 50px;
background-color: white;
height: 30px;
transform: rotate(-45deg);
}
.custom-border::before {
border-bottom: 2px solid #00ffff;
top: -10px;
left: -19px;
}
.custom-border::after {
border-top: 2px solid #00ffff;
bottom: -10px;
right: -19px;
}
</style>
</head>
<body>
<div class="custom-border"></div>
</body>
</html>
css绘制特殊边框
最新推荐文章于 2024-06-23 16:51:10 发布