div+css布局绘制城市马路立交桥高架效果代码-html代码-BFW代码库

div+css布局绘制城市马路立交桥高架效果代码

代码语言：html

代码描述：div+css布局绘制城市马路立交桥高架效果代码

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

<!DOCTYPE html>
<html lang="en" >
<head>
  <meta charset="UTF-8">
<style>
    * {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

body {
  background-color: #04011E;
  min-height: 100vh;
  width: 100%;
  overflow: hidden;
}

.c-road-block {
  margin: 0 auto;
  text-align: center;
  transform: skew(10deg);
}

.c-road {
  display: inline-block;
  width: 150px;
  height: 100vh;
  margin: 0 20px;
  background-color: #50324C;
  border-left: 10px solid #E4976B;
  border-right: 10px solid #E4976B;
  position: relative;
}
.c-road:after, .c-road:before {
  content: "";
  width: 2px;
  height: 100%;
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
  background-image: repeating-linear-gradient(to right, #D7A270 0%, #D7A270 50%, transparent 50%, transparent 100%), repeating-linear-gradient(to right, #D7A270 0%, #D7A270 50%, transparent 50%, transparent 100%), repeating-linear-gradient(to bottom, #D7A270 0%, #D7A270 50%, transparent 50%, transparent 100%), repeating-linear-gradient(to bottom, #D7A270 0%, #D7A270 50%, transparent.........完整代码请登录后点击上方下载按钮下载查看