SOURCE

console 命令行工具 X clear

                    
>
console
<div class="flag-container">
    <div class="star big">
        <div class="tri"></div>
        <div class="tri"></div>
        <div class="tri"></div>
        <div class="tri"></div>
        <div class="tri"></div>
    </div>
    <div class="star small">
        <div class="tri"></div>
        <div class="tri"></div>
        <div class="tri"></div>
        <div class="tri"></div>
        <div class="tri"></div>
    </div>
    <div class="star small">
        <div class="tri"></div>
        <div class="tri"></div>
        <div class="tri"></div>
        <div class="tri"></div>
        <div class="tri"></div>
    </div>
    <div class="star small">
        <div class="tri"></div>
        <div class="tri"></div>
        <div class="tri"></div>
        <div class="tri"></div>
        <div class="tri"></div>
    </div>
    <div class="star small">
        <div class="tri"></div>
        <div class="tri"></div>
        <div class="tri"></div>
        <div class="tri"></div>
        <div class="tri"></div>
    </div>
</div>
html, body {
    margin: 0;
    padding: 0;
}

.flag-container {
    width: 450px;
    height: 300px;
    background-color: #de2910;
}

.tri {
    border-top: 0;
    border-left: 0.5em solid transparent;
    border-right: 0.5em solid transparent;
    border-bottom: 1.5388em solid #ffde00;
    display: block;
    height: 1.5388em;
    width: 1em;
    box-sizing: border-box;
    position: absolute;
    top: 50%;
    left: 50%;
    margin-top: -0.7692em;
    margin-left: -0.5em;
}

.star {
    position: absolute;
    overflow: hidden;
    height: 2.4em;
    width: 2.4em;
}

.star.big {
    font-size: 38px;
    left: 36px;
    top: 36px;
}

.star.small {
    font-size: 12px;
}

.small:nth-child(2) {
    left: 140px;
    top: 20px;
    -webkit-transform: rotate(90deg);
    transform: rotate(90deg);
}

.small:nth-child(3) {
    left: 168px;
    top: 50px;
    -webkit-transform: rotate(-30deg);
    transform: rotate(-30deg);
}

.small:nth-child(4) {
    left: 168px;
    top: 88px;
}

.small:nth-child(5) {
    left: 140px;
    top: 118px;
    -webkit-transform: rotate(90deg);
    transform: rotate(90deg);
}

.star .tri:nth-child(1) {
    -webkit-transform: translateY(-0.5em);
    transform: translateY(-0.5em);
}

.star .tri:nth-child(2) {
    -webkit-transform: rotate(72deg) translateY(-0.5em);
    transform: rotate(72deg) translateY(-0.5em);
}

.star .tri:nth-child(3) {
    -webkit-transform: rotate(144deg) translateY(-0.5em);
    transform: rotate(144deg) translateY(-0.5em);
}

.star .tri:nth-child(4) {
    -webkit-transform: rotate(216deg) translateY(-0.5em);
    transform: rotate(216deg) translateY(-0.5em);
}

.star .tri:nth-child(5) {
    -webkit-transform: rotate(-72deg) translateY(-0.5em);
    transform: rotate(-72deg) translateY(-0.5em);
}