Question

我有这个网站：http://ba-test.nowcommu.myhostpoint.ch/antonio2/

你可以看到我正在使用3列的部分背景图片（我正在使用 Bootstrap ）。我问你的是，是否可以使用背景图片为该div创建此形状（截图）（代码）

HTML：

        <div class="row fluid bg" style="background-image: url('img/bg_section.png') !important; background-size: 100%; background-repeat: no-repeat; height: 893px;">
        <div class="col-lg-12">
            <div class="col-md-4">
                <h1 class="headline home">ARCHITEKTUR</h1>
                <h2 class="subtitle home">Lorem Ipsum. Proin gravida nibh.</h2>
                <p class="text home">Vel velit auctor aliquet. Aenean sollicitudin, lorem quis bibendum auctor, nisi elit consequat ipsum. vel velit auctor aliquet. Aenean sollicitudin, lorem quis bibendum auctor, nisi elit consequat ipsum. vel velit auctor aliquet. Aenean sollicitudin, lorem quis bibendum auctor, nisi elit consequat ipsum.</p>
            </div>

              <div class="col-md-4">
                <h1 class="headline home">LAGE</h1>
                <h2 class="subtitle home">Lorem Ipsum. Proin gravida nibh.</h2>
                <p class="text home">Vel velit auctor aliquet. Aenean sollicitudin, lorem quis bibendum auctor, nisi elit consequat ipsum. vel velit auctor aliquet. Aenean sollicitudin, lorem quis bibendum auctor, nisi elit consequat ipsum. vel velit auctor aliquet. Aenean sollicitudin, lorem quis bibendum auctor, nisi elit consequat ipsum.</p>
            </div>

            <div class="col-md-4">
                <h1 class="headline home">WOHNUNGEN</h1>
                <h2 class="subtitle home">Lorem Ipsum. Proin gravida nibh.</h2>
                <p class="text home">Vel velit auctor aliquet. Aenean sollicitudin, lorem quis bibendum auctor, nisi elit consequat ipsum. vel velit auctor aliquet. Aenean sollicitudin, lorem quis bibendum auctor, nisi elit consequat ipsum. vel velit auctor aliquet. Aenean sollicitudin, lorem quis bibendum auctor, nisi elit consequat ipsum.</p>
            </div>

            <div class="col-lg-8">
            <img class="img-responsive" src="img/place.jpg" />

            </div>

        </div>  

    </div>

Answer 1

CSS剪辑路径

使用clip-path创建所需的设计是可行的。

clip-path目前尚未得到很好的支持，但看起来是基本形状设计的未来。

div {
  width: 500px;
  -webkit-clip-path: polygon(10% 0, 90% 0, 100% 50%, 90% 100%, 10% 100%, 0 50%);
  clip-path: polygon(10% 0, 90% 0, 100% 50%, 90% 100%, 10% 100%, 0 50%);
  background: lightgrey;
  padding: 8px 10%;
  box-sizing: border-box;
}

<div>
  <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin orci arcu, sollicitudin eu sem sit amet, euismod commodo urna. Nullam lobortis sem orci, sit amet dictum metus sagittis sit amet. Sed molestie condimentum felis a ornare. In hac habitasse
    platea dictumst. Sed dolor metus, convallis ac semper nec, tincidunt quis diam. Phasellus dapibus urna ac leo luctus tincidunt. Ut molestie aliquet ante, vitae dictum ligula pulvinar et. Sed bibendum a nulla non fermentum. Pellentesque magna ex, suscipit
    consequat tincidunt id, semper sed arcu. Nam sodales a neque et vestibulum. Nam eu mi sapien. Nulla lacinia nibh in venenatis ornare. Integer sit amet arcu a massa tempus ultricies in eu orci. Aliquam sit amet scelerisque ex. Vestibulum auctor in
    velit quis suscipit.</p>
  <p>Vivamus porta turpis tempor auctor mattis. Quisque vitae nisi libero. Sed arcu dui, pharetra ac erat ac, euismod tristique erat. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Cras bibendum tellus at luctus porttitor.
    Curabitur imperdiet libero ligula. Sed ut lorem vel nisi porttitor efficitur ut finibus orci. Etiam auctor tellus sit amet ipsum porta, sed eleifend risus iaculis. Vivamus et lectus in diam molestie aliquet. Nulla a sapien vel felis imperdiet ornare.
    Ut vulputate pellentesque lectus quis ultrices.</p>
</div>

Answer 2

您可以使用after和before伪元素来执行此操作。将变换应用于pseudo-elements宽度透视

div{
    width:500px;
    height:300px;
    padding:50px;
    position:relative;
    color:#fff;
    margin:50px;
}

div:after{
    z-index:-1;
    position:absolute;
    content:"";
    width:100%;
    height:50%;
    transform:perspective(500px) rotateX(10deg);
    left:0;
    top:0;
    background:grey;
}
div:before{
    position:absolute;
    content:"";
    width:100%;
    height:50%;
    transform:perspective(500px) rotateX(-10deg);
    top:50%;
    background:grey;
    left:0;
    z-index:-1;
}

<div class="container">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</div>

这也可以通过旋转hexagons seen here

来实现

特定div的自定义形状

2 个答案:

CSS剪辑路径