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

Posted 2021-05-02

tags:

篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了如何创建一个倾斜45度并具有分隔边框的正方形相关的知识，希望对你有一定的参考价值。

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

答案

我希望你做这样的事情！

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>

以上是关于如何创建一个倾斜45度并具有分隔边框的正方形的主要内容，如果未能解决你的问题，请参考以下文章