HTML/CSS 形状 div 布局一个在另一个之上

Question

我做了这个形状： https://jsfiddle.net/5vue1buj/1/

但是，我这样做的方法是插入：

   <br /><br /><br /><br />

在顶部和底部之间。我该如何更优雅地做到这一点？

Answer 1

通过使用 css 样式 margin/padding 你可以做到这一点。

在您的情况下，您必须清除两个容器 [顶部和底部] 之间的 space。默认情况下 div 元素左对齐。我添加了一个空 div，它将删除两个容器 [using clear:both. height and overflow is added for Cross browser compatibility] 之间的 space 请检查此 Fiddle.

Answer 2

删除所有内联样式。

DEMO

HTML

<div>
    <div id="top">
        <div class="triangle-down-right">
            <!--empty-->
        </div>
        <div class="triangle-down-left">
            <!--empty-->
        </div>
    </div>
    <div id="bottom">
        <div class="triangle-up-right">
            <!--empty-->
        </div>
        <div class="triangle-up-left">
            <!--empty-->
        </div>
    </div>
</div>

然后添加这个CSS:

#top, #bottom {
    float: none;
    overflow: hidden;    
}
#top {
    margin-bottom: 10px;
}

Answer 3

通过使用 html 和 css

中的最小值

您只能使用两个 div 及其两个伪元素 :after 和 :before

.bottom {
    position:absolute;
    width:210px;
    top:180px;
}
.upper {
    position:absolute;
    width:210px;
    top:20px;
}
.upper:before {
    content:'';
    position:absolute;
    left:0;
    width: 0;
    height: 0;
    border-bottom: 100px solid #4679BD;
    border-left: 100px solid transparent;
}
.upper:after {
    content:'';
    position:absolute;
    right:0;
    width: 0;
    height: 0;
    border-bottom: 100px solid #4679BD;
    border-right: 100px solid transparent;
}
.bottom:before {
    content:'';
    position:absolute;
    left:0;
    width: 0;
    height: 0;
    border-top: 100px solid #4679BD;
    border-left: 100px solid transparent;
}
.bottom:after {
    content:'';
    position:absolute;
    right:0;
    width: 0;
    height: 0;
    border-top: 100px solid #4679BD;
    border-right: 100px solid transparent;
}

<div class="upper"></div>
<div class="bottom"></div>

Answer 4

这是另一种方法，使用更少 CSS...

#top, #bottom {
    height: 200px;
    position: relative;
}

.right, .left {
    height: 0;
    width: 0;
    display: inline-block;
}

#top {
    margin-bottom: 10px;
}
.left {
    margin-right: 10px;
}

#top .left {
    border-top: 200px solid transparent;
    border-right: 200px solid #4679bd;
}

#top .right {
    border-top: 200px solid transparent;
    border-left: 200px solid #4679bd;
}

#bottom .left {
    border-bottom : 200px solid transparent;
    border-right: 200px solid #4679bd;
}

#bottom .right {
    border-bottom: 200px solid transparent;
    border-left: 200px solid #4679bd;
}

<div>    
  <div id="top">
    <div class="left"></div><div class="right"></div>
  </div>

  <div id="bottom">
    <div class="left"></div><div class="right"></div>
  </div>
</div>

Answer 5

纯属娱乐，再举个例子。

它使用伪元素和一些新的 css3 属性将 html 标记最小化为只有一个 div。此 div 是相对定位的，但也可以是绝对定位的，以便轻松将其放置在页面上您喜欢的任何位置。

一个sophisticated jsfiddle can be found here where you can play around if the values easily (using Sass).

#shape{
    position:relative;
    background:#4679BD;
    width:200px;height:200px;
    transform:rotate(45deg);
    margin-top:50px;margin-left:50px;
    overflow:hidden;
}
#shape::before,#shape::after{
    content:"";display:block;
    position:absolute;
    width:300px;height:10px;
    background:white;
    transform:rotate(45deg);
    transform-origin:5px 5px;
    left:-5px;top:-5px;
}
#shape::after{
    transform:rotate(-45deg);
    bottom:-5px;top:auto;right:-5px;
}

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

可以通过调整伪元素的宽度轻松调整大小，例如：(dim of shape + 5) * 1,414，高度决定三角形之间的间隙。

HTML/CSS 形状 div 布局一个在另一个之上

HTML/CSS shapes div layout one on top of the other

html

css

css-position

通过使用 html 和 css