css - 使用 css 创建一个特殊的形状

Question

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

score 3 · Accepted Answer

3

是的。这种形状肯定是可能的。

于 2013-09-28T03:00:42.310 回答

score 1 · Accepted Answer

对的，这是可能的。我很想看看你的尝试，即使它们不正确。

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

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

这是jsfiddle！

2 回答 2