如何创建一个倾斜45度并具有分离边框的正方形

Question

我怎样才能用css完成这样的广场？我不知道如何创建这样的边框以及如何使文本完美居中。

Answer 1

我希望你做这样的事情！

<强> CSS：

.parent {
        width: 150px;
        height: 150px;   
        position: relative;
        top: 40px;
        left: 50px;
        transform: rotate(45deg);   
    }
    .parent:before {
        content: "";
        width: 106px;
        height: 106px;
        background: rgb(20, 20, 134);            
        position: absolute;
        transform: translate(-50%,-50%);
        top: 50%;
        left: 50%;
    }
    .orange {
        width: 100%;
        height: 20px;
        background: orange;
        position: absolute;
    }
    .orange::before, 
    .orange::after {
        content: "";
        position: absolute;
        width: 20px;
        height: 50px;
        background: orange;           
    }
    .orange::after {
        right: 0;
        height: 95px;            
    }
    .orange:last-of-type {
        bottom: 0;
        transform: scale(-1);
        
    }
    .date {      
        position: absolute;
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%) rotate(-45deg);
        color: #FFF;
        line-height: 0;
    }

<div class="parent">
    <div class="orange"></div>        
    <div class="date">
        <h4>May</h4>
        <p>2018</p>
    </div> 
    <div class="orange"></div>
</div>