没有图像的CSS3多边形，如何？答案

【问题标题】：CSS3 polygons without images, how to?没有图像的CSS3多边形，如何？
【发布时间】：2013-05-24 16:39:24
【问题描述】：

我正在建立一个网站，类似这样

顶部的两个结构是静态的，底部的四个是动态的，当我说动态时，我的意思是可扩展的，就像这样

由于这些只是颜色、形状和阴影，我相信可以使用 CSS3 来创建它们。但我很难做到这一点。我什至尝试使用 CSSHat，但结果很糟糕。

这是示例形状

这是生成的代码：

width: 1920px;
height: 341px;
-moz-border-radius: 0 1920px 1920px / 0 181px 56px;
-webkit-border-radius: 0 1920px 1920px / 0 181px 56px;
border-radius: 0 1920px 1920px / 0 181px 56px; /* border radius */
-moz-background-clip: padding;
-webkit-background-clip: padding-box;
background-clip: padding-box; /* prevents bg color from leaking outside the border */
background-color: #3b0f1d; /* layer fill content */

结果如下所示：一个活生生的例子可以在这里找到http://codepen.io/seraphzz/pen/mgDwd

实现这一目标的最佳方法是什么？

【问题讨论】：

说真的，如果您想在浏览器中创建任意形状，CSS 可能是不适合这项工作的工具。您是否考虑过使用适当的图形？例如，使用 SVG，这将非常容易。
感谢您的回答 Spudley，问题是我希望我的“divs”或“sections”或任何其他 HTML 元素具有这些形状，这就是为什么我认为我不能用SVG，我错了吗？
可扩展是否意味着您希望它们像 div:hover 那样与鼠标交互？
点击时它必须像图片中一样展开，但在悬停时也会显示一些反馈。

标签： html css polygon css-shapes

【解决方案1】：

您可以使用CSS transformations（在:before/:after 元素上）来模拟效果..

类似的东西（demo at http://codepen.io/gpetrioli/pen/LHbIE）

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

和

background{background-color: #3c101d}
.shape{
  width: 800px;
  height: 341px;
  background: white;
  display: block;
  margin:10px;
  position:relative;
  overflow:hidden;
}
.shape:before{
  content:'';
  width:110%;
  height:30px;
  background:#3c101d;
  position:absolute;
  height:100px;
  top:0;
  left:0;
  transform-origin:0 100%;
  transform: translateY(-100px) rotate(5deg);
}
.shape:after{
  content:'';
  width:110%;
  height:30px;
  background:#3c101d;
  position:absolute;
  height:100px;
  bottom:0;
  left:0;
  transform-origin:0 0;
  transform: translateY(100px) rotate(-2deg);
}

注意：此代码使用标准 CSS 属性。在需要的地方添加供应商前缀

【讨论】：

使用 Google Chrome 27 这个例子显示了一个矩形
@JoãoPauloApolinárioPassos 从 CSS 选项中启用无前缀（请参阅codepen.io/seraphzz/pen/Aklfa）或为转换添加 webkit 的供应商前缀 (-webkit-transform:)..

【解决方案2】：

这是“CSSHat 形状”的解决方案：-

<!DOCTYPE html>
<html>
<body>
<style>
    .background{
        background-color: #3c101d;
        padding:22px 28px;
        display:inline-block;
    }
    .shape{
        height: 30px;
        border-left: 645px solid white;
        border-top: 80px solid transparent;
        border-bottom: 40px solid transparent;
    }
</style>
<div class="background">
    <div class="shape"></div>
</div>
</body>
</html>

获得上述所有所需形状的诀窍是使用：- 所有边框大小、所有边框颜色以及 div 的高度或宽度。

Codepen:- http://codepen.io/mrmoje/pen/EaQNOP

【讨论】：

【解决方案3】：

这些形状在我看来就像透视变换。 http://css-tricks.com/almanac/properties/p/perspective/我不相信有一个生成器可以让左右两侧比第二个图形的橙色部分隐藏溢出的父级更宽。

您可以在旋转时从这个透视生成器看到所有角度都是可能的。 http://desandro.github.io/3dtransforms/examples/perspective-03.html

作为替代标记而不是 CSS3，它也不需要图像

我建议使用 SVG 来标记所有多边形。它更简单，所有 CSS3 浏览器都支持它。

【讨论】：

【解决方案4】：

您可以使用 CSS transforms 来旋转 div。

我已经将底部的 div 动态，并添加了一些内容到 yellow 和 green div。

body {
    margin: 0;
    padding: 0;
    overflow-x: hidden;
}
.top, .top2, .yellow, .green, .bottom, .bottom2 {
    height: 200px;
    width: 140%;
    position: relative;
    left: -10%;
    transform-origin: 0% 100%;
    transition: 0.6s ease;
}
.top {
    top: -180px;
    background: #3C101D;
    transform: rotate(4deg);
}
.top2 {
    background: #931930;
    transform: rotate(-1.5deg);
}
.yellow {
    background: #F0810E;
    top: -200px;
    transform: rotate(0.6deg);
}
.content {
    display: block;
    width: 65%;
    position: relative;
    top: 10%;
    left: 10%;
}
.yellow .content {
    transform: rotate(-0.6deg);
}
.green {
    background: #425949;
    top: -320px;
    transform: rotate(-1.4deg);
}
.green .content {
    transform: rotate(1.4deg);
}
.bottom {
    background: #501B2B;
    top: -480px;
    transform: rotate(1.4deg);
}
.bottom2 {
    background: #3C101D;
    top: -600px;
    transform: rotate(-0.6deg);
}
.yellow:hover, .green:hover, .bottom:hover, .bottom2:hover {
    height: 400px;
}

<div class="top"></div>
<div class="top2"></div>
<div class="yellow">
    <div class="content">But I must explain to you how all this mistaken idea of denouncing pleasure and praising pain was born and I will give you a complete account of the system, and expound the actual teachings of the great explorer of the truth, the master-builder of human happiness. No one rejects, dislikes, or avoids pleasure itself, because it is pleasure, but because those who do not know how to pursue pleasure rationally encounter consequences that are extremely painful. Nor again is there anyone who loves or pursues or desires to obtain pain of itself, because it is pain, but because occasionally circumstances occur in which toil and pain can procure him some great pleasure. To take a trivial example, which of us ever undertakes laborious physical exercise, except to obtain some advantage from it? But who has any right to find fault with a man who chooses to enjoy a pleasure that has no annoying consequences, or one who avoids a pain that produces no resultant pleasure?</div>
</div>
<div class="green">
<div class="content">But I must explain to you how all this mistaken idea of denouncing pleasure and praising pain was born and I will give you a complete account of the system, and expound the actual teachings of the great explorer of the truth, the master-builder of human happiness. No one rejects, dislikes, or avoids pleasure itself, because it is pleasure, but because those who do not know how to pursue pleasure rationally encounter consequences that are extremely painful. Nor again is there anyone who loves or pursues or desires to obtain pain of itself, because it is pain, but because occasionally circumstances occur in which toil and pain can procure him some great pleasure. To take a trivial example, which of us ever undertakes laborious physical exercise, except to obtain some advantage from it? But who has any right to find fault with a man who chooses to enjoy a pleasure that has no annoying consequences, or one who avoids a pain that produces no resultant pleasure?</div>
</div>
</div>
<div class="bottom"></div>
<div class="bottom2"></div>

【讨论】：