css布局实现房子效果代码-html代码-BFW代码库

代码语言：html

代码描述：css布局实现房子效果代码

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

<!DOCTYPE html>
<html lang="en" >

<head>

  <meta charset="UTF-8">
  

  
  
  
<style>
body {
    height: 97vh;
    display: flex;
    /* justify-content: center; */
    align-items: center;
    position: relative;
    background-color: rgba(0, 0, 0, 0.938);
}

#house div,
#house div::after,
#house div::before {
    position: absolute;
}

.part {
    /* border-width: 1px !important; */
    background-color: #3f0feb34;
}

.bot-roof,
.top-roof,
.mid-roof {
    height: 50%;
    width: 100%;
    background: linear-gradient(rgb(44, 39, 49), rgb(24, 20, 26));
    /* border: solid 2px rgba(128, 128, 128, 0.486); */
    transform-origin: top;
    transform: perspective(700px) rotateX(40deg);
}

.bot {
    height: 42vh;
    width: 67vw;
    top: 46vh;
    left: 15vw;
    /* background-color: #b80101; */
    background: linear-gradient(to bottom, #a00303 40%, #fd3636);
}

.bot-roof {
    height: 20%;
    transform: perspective(700px) rotateX(25deg);
    z-index: 0;
}

.bot-roof::after {
    content: "";
    width: 66.5vw;
    height: 2vh;
    background-color: #dbdbdb;
    transform: perspective(700px) rotateX(-20deg);
    bottom: -1.9vh;
    left: 0.3vw;
    z-index: -3;
    border-radius: 0px 0px 3px 3px;
}

.bot-mid {
    height: 52vh;
    width: 22vw;
    /* background-color: rgba(0, 0, 0, 0.192); */
    bottom: 0;
    left: 22vw;
    z-index: 2;
}

.brick {
    height: 1.7vh;
    width: 2.1vw;
    border-radius: 1px;
    z-index: 100;
}

.brick:nth-of-type(odd) {
    background-color: #d41616;
}

.brick:nth-of-type(even) {
    background-color: #f13e3e;
}

.bot-mid .brick:nth-of-type(1) {
    top: 27vh;
    left: 2vw;
}

.bot-mid .brick:nth-of-type(2) {
    top: 29.4vh;
    left: 3.5vw;
}

.bot-mid .brick:nth-of-type(3) {
    top: 27vh;
    left: 5vw;
}

.bot-mid .brick:nth-of-type(4) {
    top: 27vh;
    left: 15vw;
}

.bot-mid .brick:nth-of-type(5) {
    top: 25vh;
    left: 15.5vw;
}

.bot-mid .brick:nth-of-type(6) {
    top: 28.8vh;
    left: 17vw;
}

.bot-mid .brick:nth-of-type(7) {
    top: 20vh;
    left: 5vw;
}

.bot-mid .brick:nth-of-type(8) {
    top: 36vh;
    left: 6vw;
}

.bot-mid .brick:nth-of-type(9) {
    top: 36.2vh;
    left: 14vw;
}

.bot-mid .brick:nth-of-type(10) {
    top: 16vh;
    left: 2vw;
}

.bot-mid .brick:nth-of-type(11) {
    top: 13vh;
    left: 13vw;
}

.bot-mid-bot {
    width: 23vw;
    height: 13vh;
    background-color: #fffdd0;
    /* background-color: #fffdd04f; */
    top: 40vh;
    left: -.5vw;
}

.bot-mid-mid {
    width: 22vw;
    height: calc(52vh - 13vh - 12vh);
    background-color: #fffdd0;
    /* background-color: #fffdd04f; */
    top: 13vh;
    left: 0vw;
    clip-path: polygon(0 0, 100% 0, 97% 100%, 3% 100%);
    /* z-index: 1; */
}

.bot-mid-mid-inner {
    width: 21vw;
    height: calc(52vh - 13vh - 13vh);
    background-color: #ea2728;
    /* background-color: #ea272759; */
    /* top: 13vh; */
    bottom: 0vh;
    left: 0.5vw;
    clip-path: polygon(0 0, 100% 0, 97% 100%, 3% 100%);
}

.bot-mid-mid-inner-window {
    height: 18vh;
    width: 4vw;
    background-color: #fffdd0;
    /* background-color: #fffdd04f; */
    top: 4.5vh;
    left: 8.5vw;
    clip-path: polygon(0 0, 100% 0, 97% 100%, 3% 100%);
    border-radius: 2px;
}

.glass {
    background-color: #0e022c;
    /* background-color: #0e022c4f; */
    border-radius: 1px;
}

.glass-top {
    height: 1.5vw;
    width: 1.5vw;
}

.glass-topleft {
    top: .3vw;
    left: 0.3vw;
}

.glass-topright {
    top: .3vw;
    right: .3vw;
}

.glass-bottom {
    height: 13vh;
    width: 1.5vw;
}

.glass-bottomleft {
    top: 2.1vw;
    left: 0.3vw;
}

.glass-bottomright {
    top: 2.1vw;
    right: .3vw;
}

.bot-mid-triangle {
    width: 0;
    height: 0;
    border-style: solid;
    border-width: 0vw 11vw 13vh 11vw;
    border-color: transparent transparent #fffdd0 transparent;
    /* border-color: transparent transparent #fffdd03d transparent; */
    top: 0vh;
    left: 0vw;
}

.bot-mid-triangle-inner {
    width: 0;
    height: 0;
    border-style: solid;
    border-width: 0vw 10.5vw 12vh 10.5vw;
    border-color: transparent transparent #ea2728 transparent;
    /* border-color: transparent transparent #ea27273a transparent; */
    top: 2.1vh;
    left: -10.5vw;
}

.bot-mid-triangle::before {
    content: "";
    position: inherit;
    height: 0;
    width: 0;
    border-style: solid;
    border-width: 0vw 12vw 14vh 12vw;
    border-color: transparent transparent #170f1f transparent;
    /* border-color: transparent transparent #3e384462 transparent; */
    top: -1vh;
    left: -12vw;
    z-index: -10;
}

.roundwindow {
    height: 3vw;
    width: 3vw;
    border-radius: 50%.........完整代码请登录后点击上方下载按钮下载查看