Html 如何在div内用CSS刻写以下形状？

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

HTML

---

您可以使用此css创建菱形，假设这是div，您希望上面的形状id与css（切割菱形）相同

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

---

使用SVG：

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

在使用SVG时，您可以使用

path

和

polyline

元素来绘制所需的形状。正如Paulie_D在评论中指出的那样，SVG是这种复杂形状的更好选择，而不是CSS（尽管这也可以通过CSS实现）

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

• 顶部多边形的一个

  路径

  元素，通过连接坐标

  （0,50）

  、

  （50,0）

  、

  （100,50）

  和

  （50,70）

  处的点绘制
• 底部多边形的另一个

  路径

  元素，通过连接

  （0,50）

  、

  （50,70）

  和

  （100,50）

  处的点绘制
• 橙色边框的一个

  多段线

  元素，它只是一条连接

  （0,50）

  、

  （50,70）

  和

  （100,50）

  的线

svg{
高度：100px；
宽度：100px；
}
路径#顶部{
填充物：灰色；
}
路径#底部{
填充：黑色；
}
多段线#边界{
笔画：橙色；
笔画宽度：2；
填充：无；
}

---

这在CSS中是一个相当复杂的形状，但正如其他人所示，这是可能的

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

不过，一个好的替代方法是使用SVG。这是一个矢量图形，因此它的响应能力非常强，并且得到了很好的支持（）

 #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。没有必要让事情变得比实际情况更复杂。哈利，这是一个聪明的安瑟+1.兄弟，我在这个网站已经有一段时间了，从来没有遇到过这样一个对我的任何问题的格式良好的答案。我们可以将方块阴影添加到svg吗？@SachinDivakar:不，不能添加

方块阴影

，但你可以使用

过滤器

（CSS或svg）。你有样本图像吗？我将根据图片进行尝试。如果你能做到这一点，那将非常有帮助Bro这与我要求的相去甚远，但加上+1的努力，这可能会对一些一件事有所帮助。如果你回答一个问题，请同时使用JSFIDLE或codepen或jsbin添加一个演示