CSS: Border-Radius带有方形-剪切/切断角而不是圆角

Question

有没有可能使用纯CSS (没有图像或其他东西。就像这样)来创建正方形的边角。

示例：

.elem {
     border-radius:50%;
}

上面的CSS创建了一个圆--非常有用。

然而，我正在寻找在CSS中创建一个钻石的可能性。或者只是一个具有截断角的元素。我想到了transform属性，但也许有一些东西可以只切掉角落，而不是翻转整个元素并将其内容还原？

Answer 1

这是一个有效的钻石jsfiddle：https://jsfiddle.net/h9xmtnma/

需要记住的重要一点是使用这种符号的能力

#diamond:after

这非常有用！

希望它能为您工作！:)

编辑:这是代码。

#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;
border: 50px solid transparent;
border-top-color: red;
}