四角边框效果

演示效果
代码如下:
主要使用了伪元素(::before和::after)和border样式
html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>CSS四角边框</title>
<style>
.box-top-panel {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
}

.box-top-panel::before {
  position: absolute;
  top: 0;
  left: 0;
  content: "";
  width: 15px;
  height: 15px;
  border-top: 2px solid #87E0E2;
  border-left: 2px solid #87E0E2;
}
.box-top-panel::after {
  position: absolute;
  top: 0;
  right: 0;
  content: "";
  width: 15px;
  height: 15px;
  border-top: 2px solid #87E0E2;
  border-right: 2px solid #87E0E2;
}

.box-panel-footer {
  position: absolute;
  left: 0;
  bottom: 0;
  width: 100%;
}
.box-panel-footer::before {
  position: absolute;
  bottom: 0;
  left: 0;
  content: "";
  width: 15px;
  height: 15px;
  border-bottom: 2px solid #87E0E2;
  border-left: 2px solid #87E0E2;
}
.box-panel-footer::after {
  position: absolute;
  bottom: 0;
  right: 0;
  content: "";
  width: 15px;
  height: 15px;
  border-bottom: 2px solid #87E0E2;
  border-right: 2px solid #87E0E2;
}


/* 图表框 */
.box-panel {
  position: relative;
  width: 18vw;
  height: 18vh;
  margin: 0 auto;

  display: flex;
  justify-content: center;
  align-items: center;
}
.box-back {
  background-color: #87E0E244;
  /* background-color: #585F72CC; */
  padding: 1vh 0.5vw;
  z-index: 10;
}
</style>
</head>
<body>
<div class="box-panel box-back">
    <div class="box-top-panel"></div>
    <!-- <div id="userInfo" class="chart"></div> -->
    <div>演示效果</div>
    <div class="box-panel-footer"></div>
</div>
</body>
</html>
四角边框效果 ​

四角边框效果
