Q:

Custom shape for a specific div

i have this website: http://ba-test.nowcommu.myhostpoint.ch/antonio2/
as you can see i'm using a background picture for the section with the 3 columns (i'm using Bootstrap). What i'm asking you is if it is possible, instead to use a background picture, to create this shape(screenshot) for that div (code)

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>

A:

CSS Clip Path
This is possible using clip-path to create the desired design.

clip-path MDN
clip-path Browser Support

clip-path is not currently very well supported but looks to be the future in basic shape design.

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>

A:

You can use after and before pseudo-elements to do this. Apply transform to the pseudo-elements width perspective

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>

This can also be achieved by rotating the hexagons seen here

