使用css创建一个特殊形状

Question

这种形状是否可以使用纯css并且仅使用1个div？

shape

Answer 1

Yes。这种形状当然是可能的。

Answer 2

是的，这是可能的。我很乐意看到你的尝试，即使他们不正确。

我是这样做的，只创建一个这样的元素：

<div class="shape"></div>

一切都是用css来完成的。首先，顶部圆角由：

制成

border-top-left-radius: 5px;
border-top-right-radius: 5px;

右边的角度边框是使用css选择器:after使用透明边框完成的，如下所示：

border-bottom: 76px solid #333;
border-right: 40px solid transparent;

Here是jsfiddle！