CSS：Border-Radius，带有方形切割/切角而不是圆角

Question

是否可以使用纯CSS（没有图像或类似的东西）来创建方形切角。

示例：

.elem {
     border-radius:50%;
}

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

但是我在CSS中寻找创建钻石的可能性。或者只是一个带有切角的元素。我考虑过转换属性，但也许只有切割角落而不是转动整个元素并将其内容转回来？

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