console 命令行工具 X clear
console
<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title>绘制一个3D立方体</title>

    <style type="text/css">

        #A {
            margin-left: 75px;
            width: 300px;
            height: 150px;
            background-color: #ffa28a;
            transform: skewX(-45deg);
        }

        #B {
            width: 300px;
            height: 300px;
            background-color: #61ff87;
            float: left;
        }

        #C {
            width: 150px;
            height: 300px;
            background-color: #7961ff;
            float: left;
            transform: skewY(-45deg);
            margin-top: -75px;
        }

        #lineA {
            position: absolute;
            left: 160px;
            top: 10px;
            width: 0;
            height: 300px;
            border: dashed 1px ;
        }

        #lineB {
            position: absolute;
            left: 85px;
            top: 275px;
            width: 0;
            height: 212px;
            border: dashed 1px ;
            transform: rotate(45deg);
        }

        #lineC {
            position: absolute;
            left: 160px;
            top: 305px;
            width: 300px;
            height: 0px;
            border: dashed 1px ;
        }

    </style>

</head>
<body>

<div id="A"></div>
<div id="B"></div>
<div id="C"></div>

<div id="lineA"></div>
<div id="lineB"></div>
<div id="lineC"></div>

</body>
</html>