7

我正在建立一个网站，就像这样 不展开

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

有扩展

由于这些只是颜色、形状和阴影，我相信可以使用 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

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

4

4 回答 4

4

您可以使用 CSStransforms来旋转 div。

我已经使底部 div动态化，并在黄色和绿色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>

于 2015-02-13T15:05:16.493 回答
1

这是“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

于 2013-05-29T17:52:19.807 回答
1

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

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

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

我建议使用 SVG 来标记所有的多边形。所有 CSS3 浏览器都更容易和支持它。

于 2013-11-13T19:18:43.113 回答
1

您可以使用CSS 转换( on :before/ :afterelements ) 来模拟效果..

类似的东西（在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 属性。在需要的地方添加供应商前缀

于 2013-05-29T12:31:32.170 回答