一个div布局实现一个六字效果-html代码-BFW代码库

一个div布局实现一个六字效果

代码语言：html

代码描述：一个div布局实现一个六字效果

下面为部分代码预览，完整代码请点击下载或在bfwstudio webide中打开


<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<style>
#six {
  width: 130px;
  height: 70px;
  margin-left: -190px;
  margin-top: -55px;
  position: absolute;
  left: 50%;
  top: 50%;
  background-repeat: no-repeat;
  background-image: linear-gradient(160deg, rgba(25,25,112,0.5), rgba(25,25,112,0) 55%), repeating-linear-gradient(to right, black, black 5px, white 5px, white 10px), linear-gradient(to right, rgba(25,25,112,0.5) 50%, rgba(25,25,112,0) 60%), linear-gradient(to left, rgba(25,25,112,0) 40%, rgba(25,25,112,0.5) 50%, rgba(25,25,112,0) 60%), repeating-linear-gradient(to bottom, black, black 5px, white 5px, white 10px);
  background-size: 45px 100%, 45px 100%, 70% 45px, 70% 45px, 70% 45px;
  background-position: 0 0, 0 0, 0 100%, 100% 100%, 0 100%;
  border-radius: 20px 0 0 20px;
  box-shadow: 0 -5px 0 black, 0 -10px 0 white, 0 -15px 0 black, 0 -20px 0 white, 0 -25px 0 black, 0 -30px 0 white, 0 -35px 0 black, 0 -40px 0 white, 0 -45px 0 black;
}
@media (max-width: 550px) {
  #six {
    transform: scale(0.7);
    margin-left: -152px;
  }
}
#six:before,
#six:after {
  display: block;
  content: '';
  position: absolute;
}
#six:before {
  width: 100%;
  height: 100%;
  top: 25px;
  background-repeat: no-repeat;
  background-image: linear-gradient(-160deg, rgba(25,25,112,0) 55%, rgba(25,25,112,0.5)), repeating-linear-gradient(to right, black, black 5px, white 5px, white 10px);
  background-size: 45px 100%;
  background-position: 100% 0, 100% 0;
  border-radius: 0 20px 20px 0;
  box-shadow: 0 5px 0 black, 0 10px 0 white, 0 15px 0 black, 0 20px 0 white, 0 25px 0 black, 0 30px 0 white, 0 35px 0 black, 0 40px 0 white, 0 45px 0 black;
  z-index: 2;
}
#six:after {
  width: 280px;
  height: 185px;
  left: 100px;
  top: -45px;
  background-repeat: no-repeat;
  background-image: linear-gradient(60deg, rgb.........完整代码请登录后点击上方下载按钮下载查看