在CSS中创建一个形状

Question

是否可以在CSS中创建此形状？

如果是，请说明如何？请描述并添加评论，以便其他人也可以从中受益！

Answer 1

有很多在线教程可以使用CSS3制作形状。不过我为你做了一个演示..

CSS应该是这样的..

div{
border:20px solid red; 
border-bottom: 20px solid transparent;
border-left: 20px solid transparent;
border-right: 20px solid transparent;
}
<div></div>

这是适合你的演示。 http://jsbin.com/zevavica/1/

Answer 2

CSS中可以使用形状，并且有很多在线资源都有关于如何制作它们的示例和教程。

以下是其中一个：http://www.css3shapes.com/

我建议您对Google进行一些研究，您可以在那里找到所需的一切。

祝你好运！

Answer 3

<强>示例：

HTML

<div id='trapezoid'></div>

CSS

#trapezoid {
    border-bottom: 100px solid red;
    border-left: 50px solid transparent;
    border-right: 50px solid transparent;
    height: 0;
    width: 300px;
    -webkit-transform:rotate(180deg);
}

我希望这会对你有所帮助。 感谢： - ）

Answer 4

您可以在HTML文档中创建一个div并将以下CSS应用于它。

#trapezoid {
    border-top: 100px solid grey;
    border-left: 50px solid transparent;
    border-right: 50px solid transparent;
    width: 600px;
}

Answer 5

您想要的形状（不完全相同，但您可以相应地设置尺寸）

<强> CSS：

#holder {
    background: #EEF3FA;
    height:40px;
    width: 340px;
}
#shape {
    width: 300px;
    border-top: 20px solid #8D8D8D;
    border-left: 20px solid transparent;
    border-right: 20px solid transparent;
}

<强> HTML：

<div id="holder">
    <div id="shape"></div>
</div>