css - 仅使用 css3 创建钻石

Question

我想使用 css3 创建一个钻石。我有这段代码返回了部分结果。

.diamond {
 width: 100%;
 height: 100%;
 border: 50px solid transparent;
 border-bottom-color: red;
 position: relative;
 top: -50px; }

.diamond:after {
 content: '';
 position: absolute;
 left: -50px;
 top: 50px;
 width: 100%;
 height: 100%;
 bord*emphasized text*er: 50px solid transparent;
 border-top-color: red;
 }

Answer 1

查看此链接，您可以访问不同类型的形状。

https://css-tricks.com/examples/ShapesOfCSS/#cut-diamond

    #cut-diamond {
        border-style: solid;
        border-color: transparent transparent red transparent;
        border-width: 0 25px 25px 25px;
        height: 0;
        width: 50px;
        position: relative;
        margin: 20px 0 50px 0;
    }
    #cut-diamond:after {
        content: "";
        position: absolute;
        top: 25px;
        left: -25px;
        width: 0;
        height: 0;
        border-style: solid;
        border-color: red transparent transparent transparent;
        border-width: 70px 50px 0 50px;
    }

    #cut-diamond {
        border-style: solid;
        border-color: transparent transparent red transparent;
        border-width: 0 25px 25px 25px;
        height: 0;
        width: 50px;
        position: relative;
        margin: 20px 0 50px 0;
    }
    #cut-diamond:after {
        content: "";
        position: absolute;
        top: 25px;
        left: -25px;
        width: 0;
        height: 0;
        border-style: solid;
        border-color: red transparent transparent transparent;
        border-width: 70px 50px 0 50px;
    }

<div id="cut-diamond"></div>