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;
    }

＆＃13;

    #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;
    }

＆＃13;

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

＆＃13;

Answer 2

更改css，如：

.diamond {
 width: 0; 
 height: 0; 
 border: 50px solid transparent; 
 border-bottom: 20px solid red; 
 position: relative; 
 top: -50px; 
}

.diamond:after {
 content: ''; 
 position: absolute; 
 left: -50px; 
 top: 19px; 
 width: 0; 
 height: 0; 
 border: 50px solid transparent; 
 border-top: 70px solid red;
}

<div class="diamond" />

您可以在here

中找到不同的形状

Answer 3

您需要将100％更改为0，如下所示：

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

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

仅使用css3创建钻石

3 个答案: