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