CSS构建的平面建筑布局图

建筑俯视图（平面设计图）

css3, map, board

《aframe.js 3d拼图代码详解》作品已被踏得网收录！

第三方库
作品简介 14590
作品推荐
使用帮助
常用链接

HTML
CSS
JavaScript
Result

编译

JavaScript

编译

CSS

* {
    box-sizing: border-box;
}
body {
    margin: 0;
    background-position: center;
    background-repeat: repeat;
    background-size: 100px;
    font-family: "Oswald", sans-serif;
    font-weight: 400;
    font-size: 10px;
    color: #080808;
    text-transform: uppercase;
}
h1,
h2,
h3,
h4,
h5,
h6 {
    margin: 0;
}
.dark-purple {
    background: #5e3577;
}
.light-blue {
    background: #d2eaf5;
}
.purple {
    background: #b02f7c;
}
.orange {
    background: #fa811d;
}
.red {
    background: #f50c2b;
}
.yellow {
    background: #ffed20;
}
.green {
    background: #41994e;
}
.dark-blue {
    background: #5a6dba;
}
.table {
    padding-left: 50px;
    padding-right: 50px;
}
.board {
    display: grid;
    grid-template-columns: 125px repeat(9, 80px) 125px;
    grid-template-rows: 125px repeat(9, 80px) 125px;
    grid-gap: 2px;
    margin: 50px auto;
    width: 994px;
    height: 994px;
    background: #080808;
    border: 2px solid #080808;
}
.center {
    grid-column: 2 / 11;
    grid-row: 2 / 11;
    background: #fafaf8;
    display: grid;
    grid-template-columns: repeat(7, 1fr);
    grid-template-rows: repeat(7, 1fr);
    justify-items: center;
    align-items: center;
}
.title {
    grid-column: 1 / 9;
    grid-row: 4;
    font-size: 90px;
    font-weight: 400;
    letter-spacing: 12px;
}
.community-chest-deck {
    grid-column: 2 / 4;
    grid-row: 2 / 4;
    transform: rotate(135deg);
    margin-bottom: 60px;
    margin-right: 60px;
}
.chance-deck {
    grid-column: 5 / 7;
    grid-row: 5 / 7;
    transform: rotate(315deg);
    margin-top: 60px;
    margin-left: 60px;
}
.label {
    text-align: center;
    font-weight: 500;
    letter-spacing: 3px;
    padding-bottom: 10px;
}
.deck {
    border: 2px dashed #080808;
    width: 160px;
    height: 120px;
}
.row {
    display: grid;
    grid-gap: 2px;
}
.horizontal-row {
    grid-template-columns: repeat(9, 80px);
    grid-template-rows: 125px;
}
.vertical-row {
    grid-template-columns: 125px;
    grid-template-rows: repeat(9, 80px);
}
.vertical-row .container {
    top: 50%;
    left: 50%;
}
.bottom-row {
    grid-column: 2 / 11;
    grid-row: 11;
}
.left-row {
    grid-column: 1;
    grid-row: 2 / 11;
}
.left-row .container {
    transform: translate(-50%, -50%) rotate(90deg);
}
.top-row {
    grid-column: 2 / 11;
    grid-row: 1;
}
.top-row .container {
    transform: rotate(180deg);
}
.right-row {
    grid-column: 11;
    grid-row: 2 / 11;
}
.right-row .container {
    transform: translate(-50%, -50%) rotate(270deg);
}
.space {
    background: #fafaf8;
    text-align: center;
}
.space .container {
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    position: relative;
    transform-origin: center;
    height: 125px;
    width: 80px;
}
.space .name,
.space .instructions {
    padding-left: 15px;
    padding-right: 15px;
}
.space .price {
    font-size: 7px;
    font-weight: 400;
    padding-bottom: 5px;
}
.corner .container {
    justify-content: space-around;
    height: 100%;
    width: 100%;
}
.corner .name {
    padding: 0;
}
.property .color-bar {
    height: 25px;
    border-bottom: 2px solid #080808;
}
.property .name {
    padding-bottom: 50px;
}
.railroad .name {
    padding-top: 10px;
}
.railroad .drawing {
    font-size: 60px;
    color: #080808;
}
.utility .name {
    padding-top: 10px;
}
.utility .drawing {
    font-size: 70px;
}
.fee .name {
    padding-top: 10px;
    font-size: 14px;
}
.fee .instructions {
    font-size: 10px;
}
.go {
    grid-column: 11;
    grid-row: 11 / 12;
    position: relative;
}
.go .container {
    justify-content: flex-start;
    transform: rotate(315deg);
}
.go .instructions {
    padding: 0 30px;
}
.go .go-word {
    font-size: 60px;
    color: #f50c2b;
}
.go .arrow {
    font-size: 45px;
    color: #f50c2b;
    position: absolute;
    bottom: -10px;
    left: 5px;
}
.jail {
    grid-column: 1;
    grid-row: 11 / 12;
    display: grid;
    grid-template-columns: repeat(10, 12.5px);
    grid-template-rows: repeat(10, 12.5px);
    justify-content: center;
    align-items: center;
}
.jail .drawing {
    grid-column: 4 / 11;
    grid-row: 1 / 8;
    width: 87.5px;
    height: 87.5px;
    background: #fa811d;
    border-bottom: 2px solid #080808;
    border-left: 2px solid #080808;
}
.jail .just {
    grid-column: 3;
    grid-row: 4;
    transform: rotate(90deg);
    padding-top: 5px;
}
.jail .visiting {
    grid-column: 6;
    grid-row: 8;
    padding-top: 5px;
}
.jail .container {
    align-items: center;
    transform: rotate(45deg);
}
.jail .name {
    font-size: 14px;
}
.jail .window {
    display: flex;
    justify-content: space-around;
    align-items: center;
    position: relative;
    width: 55px;
    height: 55px;
    background: #fafaf8;
    border: 2px solid #080808;
}
.jail .person {
    position: absolute;
    transform: translate(-50%, -50%);
    top: 50%;
    left: 50%;
    font-size: 40px;
}
.jail .bar {
    height: 55px;
    width: 2px;
    background: #080808;
}
.free-parking {
    grid-column: 1;
    grid-row: 1 / 2;
}
.free-parking .container {
    justify-content: center;
    transform: rotate(135deg);
}
.free-parking .name {
    font-size: 16px;
}
.free-parking .drawing {
    font-size: 60px;
    color: #f50c2b;
    padding-top: 5px;
    padding-bottom: 5px;
}
.go-to-jail {
    grid-column: 11;
    grid-row: 1 / 1;
}
.go-to-jail .container {
    justify-content: center;
    transform: rotate(225deg);
}
.go-to-jail .name {
    font-size: 16px;
}
.go-to-jail .drawing {
    font-size: 60px;
    color: #640303;
    padding-top: 5px;
    padding-bottom: 5px;
}
.chance .container {
    justify-content: center;
}
.chance .drawing {
    font-size: 90px;
    color: #f50c2b;
}
.chance .blue {
    color: #5a6dba;
}
.community-chest .container {
    justify-content: space-around;
}
.community-chest .drawing {
    font-size: 50px;
    color: #d2eaf5;
}
.community-chest .instructions {
    font-size: 8px;
}
.electric-company .drawing {
    color: #ffed20;
}
.waterworks .drawing {
    color: #5a6dba;
}
.income-tax .container {
    justify-content: center;
    align-items: center;
}
.income-tax .name {
    padding-bottom: 5px;
}
.income-tax .diamond {
    width: 5px;
    height: 5px;
    background: #080808;
    transform: rotate(45deg);
    display: inline-block;
}
.income-tax .instructions {
    padding-top: 5px;
    padding-bottom: 5px;
}
.luxury-tax .drawing {
    font-size: 50px;
}
.luxury-tax .instructions {
    padding-bottom: 5px;
}
.long-name {
    padding-left: 0 !important;
    padding-right: 0 !important;
}
.three-line-name {
    position: relative;
    top: 5px;
}

HTML

<div class="table">
    <div class="board">
        <div class="center">
            <div class="community-chest-deck">
                <h2 class="label">Community Chest</h2>
                <div class="deck"></div>
            </div>
            <h1 class="title">MONOPOLY</h1>
            <div class="chance-deck">
                <h2 class="label">Chance</h2>
                <div class="deck"></div>
            </div>
        </div>

<div class="space corner go">
            <div class="container">
                <div class="instructions">Collect $200.00 salary as you pass</div>
                <div class="go-word">go</div>
            </div>
            <div class="arrow fa fa-long-arrow-left"></div>
        </div>

<div class="row horizontal-row bottom-row">
            <div class="space property">
                <div class="container">
                    <div class="color-bar light-blue"></div>
                    <div class="name">Connecticut Avenue</div>
                    <div class="price">PRICE $120</div>
                </div>
            </div>
            <div class="space property">
                <div class="container">
                    <div class="color-bar light-blue"></div>
                    <div class="name">Vermont Avenue</div>
                    <div class="price">Price $100</div>
                </div>
            </div>
            <div class="space chance">
                <div class="container">
                    <div class="name">Chance</div>
                    <i class="drawing fa fa-question"></i>
                </div>
            </div>
            <div class="space property">
                <div class="container">
                    <div class="color-bar light-blue"></div>
                    <div class="name">Oriental Avenue</div>
                    <div class="price">Price $100</div>
                </div>
            </div>
            <div class="space railroad">
                <div class="container">
                    <div class="name">Reading Railroad</div>
                    <i class="drawing fa fa-subway"></i>
                    <div class="price">Price $200</div>
                </div>
            </div>
            <div class="space fee income-tax">
                <div class="container">
                    <div class="name">Income Tax</div>
                    <div class="diamond"></div>
                    <div class="instructions">Pay 10%
                        <br>or
                        <br>$200</div>
                </div>
            </div>
            <div class="space property">
                <div class="container">
                    <div class="color-bar dark-purple"></div>
                    <div class="name">Baltic Avenue</div>
                    <div class="price">Price $50</div>
                </div>
            </div>
            <div class="space community-chest">
                <div class="container">
                    <div class="name">Community Chest</div>
                    <i class="drawing fa fa-cube"></i>
                    <div class="instructions">Follow instructions on top card</div>
                </div>
            </div>
            <div class="space property">
                <div class="container">
                    <div class="color-bar dark-purple"></div>
                    <div class="name three-line-name">Mediter-
                        <br>ranean
                        <br>Avenue</div>
                    <div class="price">Price $50</div>
                </div>
            </div>
        </div>

<div class="space corner jail">
            <div class="just">Just</div>
            <div class="drawing">
                <div class="container">
                    <div class="name">In</div>
                    <div class="window">
                        <div class="bar"></div>
                        <div class="bar"></div>
                        <div class="bar"></div>
                        <i class="person fa fa-frown-o"></i>
                    </div>
                    <div class="name">Jail</div>
                </div>
            </div>
            <div class="visiting">Visiting</div>
        </div>

<div class="row vertical-row left-row">
            <div class="space property">
                <div class="container">
                    <div class="color-bar orange"></div>
                    <div class="name">New York Avenue</div>
                    <div class="price">Price $200</div>
                </div>
            </div>
            <div class="space property">
                <div class="container">
                    <div class="color-bar orange"></div>
                    <div class="name">Tennessee Avenue</div>
                    <div class="price">Price $180</div>
                </div>
            </div>
            <div class="space community-chest">
                <div class="container">
                    <div class="name">Community Chest</div>
                    <i class="drawing fa fa-cube"></i>
                    <div class="instructions">Follow instructions on top card</div>
                </div>
            </div>
            <div class="space property">
                <div class="container">
                    <div class="color-bar orange"></div>
                    <div class="name">St. James Avenue</div>
                    <div class="price">Price $180</div>
                </div>
            </div>
            <div class="space railroad">
                <div class="container">
                    <div class="name long-name">Pennsylvania Railroad</div>
                    <i class="drawing fa fa-subway"></i>
                    <div class="price">Price $200</div>
                </div>
            </div>
            <div class="space property">
                <div class="container">
                    <div class="color-bar purple"></div>
                    <div class="name">Virginia Avenue</div>
                    <div class="price">Price $160</div>
                </div>
            </div>
            <div class="space property">
                <div class="container">
                    <div class="color-bar purple"></div>
                    <div class="name">States Avenue</div>
                    <div class="price">Price $140</div>
                </div>
            </div>
            <div class="space utility electric-company">
                <div class="container">
                    <div class="name">Electric Company</div>
                    <i class="drawing fa fa-lightbulb-o"></i>
                    <div class="price">Price $150</div>
                </div>
            </div>
            <div class="space property">
                <div class="container">
                    <div class="color-bar purple"></div>
                    <div class="name">St. Charles Place</div>
                    <div class="price">Price $140</div>
                </div>
            </div>
        </div>

<div class="space corner free-parking">
            <div class="container">
                <div class="name">Free</div>
                <i class="drawing fa fa-car"></i>
                <div class="name">Parking</div>
            </div>
        </div>

<div class="row horizontal-row top-row">
            <div class="space property">
                <div class="container">
                    <div class="color-bar red"></div>
                    <div class="name">Kentucky Avenue</div>
                    <div class="price">Price $220</div>
                </div>
            </div>
            <div class="space chance">
                <div class="container">
                    <div class="name">Chance</div>
                    <i class="drawing fa fa-question blue"></i>
                </div>
            </div>
            <div class="space property">
                <div class="container">
                    <div class="color-bar red"></div>
                    <div class="name">Indiana Avenue</div>
                    <div class="price">Price $220</div>
                </div>
            </div>
            <div class="space property">
                <div class="container">
                    <div class="color-bar red"></div>
                    <div class="name">Illinois Avenue</div>
                    <div class="price">Price $200</div>
                </div>
            </div>
            <div class="space railroad">
                <div class="container">
                    <div class="name">B & O Railroad</div>
                    <i class="drawing fa fa-subway"></i>
                    <div class="price">Price $200</div>
                </div>
            </div>
            <div class="space property">
                <div class="container">
                    <div class="color-bar yellow"></div>
                    <div class="name">Atlantic Avenue</div>
                    <div class="price">Price $260</div>
                </div>
            </div>
            <div class="space property">
                <div class="container">
                    <div class="color-bar yellow"></div>
                    <div class="name">Ventnor Avenue</div>
                    <div class="price">Price $260</div>
                </div>
            </div>
            <div class="space utility waterworks">
                <div class="container">
                    <div class="name">Waterworks</div>
                    <i class="drawing fa fa-tint"></i>
                    <div class="price">Price $120</div>
                </div>
            </div>
            <div class="space property">
                <div class="container">
                    <div class="color-bar yellow"></div>
                    <div class="name">Marvin Gardens</div>
                    <div class="price">Price $280</div>
                </div>
            </div>
        </div>

<div class="row vertical-row right-row">
            <div class="space property">
                <div class="container">
                    <div class="color-bar green"></div>
                    <div class="name">Pacific Avenue</div>
                    <div class="price">Price $300</div>
                </div>
            </div>
            <div class="space property">
                <div class="container">
                    <div class="color-bar green"></div>
                    <div class="name three-line-name">North Carolina Avenue</div>
                    <div class="price">Price $300</div>
                </div>
            </div>
            <div class="space community-chest">
                <div class="container">
                    <div class="name">Community Chest</div>
                    <i class="drawing fa fa-cube"></i>
                    <div class="instructions">Follow instructions on top card</div>
                </div>
            </div>
            <div class="space property">
                <div class="container">
                    <div class="color-bar green"></div>
                    <div class="name long-name">Pennsylvania Avenue</div>
                    <div class="price">Price $320</div>
                </div>
            </div>
            <div class="space railroad">
                <div class="container">
                    <div class="name">Short Line</div>
                    <i class="drawing fa fa-subway"></i>
                    <div class="price">Price $200</div>
                </div>
            </div>
            <div class="space chance">
                <div class="container">
                    <div class="name">Chance</div>
                    <i class="drawing fa fa-question"></i>
                </div>
            </div>
            <div class="space property">
                <div class="container">
                    <div class="color-bar dark-blue"></div>
                    <div class="name">Park Place</div>
                    <div class="price">Price $350</div>
                </div>
            </div>
            <div class="space fee luxury-tax">
                <div class="container">
                    <div class="name">Luxury Tax</div>
                    <div class="drawing fa fa-diamond"></div>
                    <div class="instructions">Pay $75.00</div>
                </div>
            </div>
            <div class="space property">
                <div class="container">
                    <div class="color-bar dark-blue"></div>
                    <div class="name">Boardwalk</div>
                    <div class="price">Price $400</div>
                </div>
            </div>
        </div>
    </div>
</div>

建筑俯视图（平面设计图）

css3, map, board

编辑器支持Emmet

快捷键

建筑俯视图（平面设计图）

css3, map, board

使用CSS和JavaScript构建一个可滑动的水平时间轴布局

纯CSS构建的3D网格平面延伸动画

编辑器支持Emmet

快捷键

语言：

语言：

导入代码模板：