How to make diamond shape in html div using css3 without using background image...?

Question

I am making html of above image, I already tried several different ways using css3, html5 to implement this, but I think it is impossible without using background images.

_{Source: http://ashteldemo.com/1231231.jpg}

Can anyone suggest something about implementing this without background images?

Answer 1

I created an example using only HTML and CSS and it is a little bit close to the image version, but i think isn't practical to build this with only HTML and CSS. Check out.

HTML

<div class="container">
        <div class="top">
            <div class="diamond-one">
                <h3>Title</h3>
                <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
                tempor incididunt ut labore et dolore magna aliqua.</p>
            </div>
            <div class="diamond-inverted"><img src="http://cdn.sheknows.com/articles/2011/04/kids-playing-hens-chicks.jpg"></div>
            <div class="diamond-two">
                <h3>Title</h3>
                <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
                tempor incididunt ut labore et dolore magna aliqua.</p>
            </div>
        </div>

        <div class="bottom">
            <div class="diamond-one-2"><img src="http://www.joannejacobs.com/wp-content/uploads/2012/06/bigstock-Group-of-kids-playing-with-con-12140777-2.jpg"></div>
            <div class="diamond-inverted-2">
                <h3>Title</h3>
                <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
                tempor incididunt ut labore et dolore magna aliqua.</p>
            </div>
            <div class="diamond-two-2"><img src="http://thinklink.in/wp-content/uploads/child-play-kid-girl-jpg_155838.jpg"></div>
        </div>
    </div>

CSS

.container{
            width: 600px;
        }
        .diamond-one{

            z-index: 1;
            float: left;
            width: 200px;
            height: 200px;
            background-color: #FBA919;
            position: relative;
        }
        .diamond-one > h3{
            padding: 10px;
            color: white;
            font-family: Verdana;
            margin: 0;
            text-align: center;
            -webkit-box-sizing: border-box;
            -moz-box-sizing: border-box;
            box-sizing: border-box;
        }
        .diamond-one > p{
            padding: 10px;
            color: white;
            font-family: Verdana;
            margin: 0;
            -webkit-box-sizing: border-box;
            -moz-box-sizing: border-box;
            box-sizing: border-box;
        }
        .diamond-one::before{
            border-color: #FBA919 transparent transparent transparent;
            border-style: solid;
            border-width: 100px; /* half of diamond width*/
            content: "";
            position: absolute;
            bottom: -200px; /* equals diamond width*/
        }
        .diamond-two{
            z-index: 1;
            float: left;
            width: 200px;
            height: 200px;
            background-color: #03A6E1;
            position: relative;
        }
        .diamond-two::before{
            border-color: #03A6E1 transparent transparent transparent;
            border-style: solid;
            border-width: 100px; /* half of diamond width*/
            content: "";
            position: absolute;
            bottom: -200px; /* equals diamond width*/
        }
        .diamond-two > h3{
            padding: 10px;
            color: white;
            font-family: Verdana;
            margin: 0;
            text-align: center;
            -webkit-box-sizing: border-box;
            -moz-box-sizing: border-box;
            box-sizing: border-box;
        }
        .diamond-two > p{
            padding: 10px;
            color: white;
            font-family: Verdana;
            margin: 0;
            -webkit-box-sizing: border-box;
            -moz-box-sizing: border-box;
            box-sizing: border-box;
        }
        .diamond-inverted{
            overflow: hidden;
            float: left;
            width: 200px;
            height: 200px;
            background-color: white;
            position: relative;
        }
        .diamond-inverted::before{
            border-color: transparent transparent white transparent;
            border-style: solid;
            border-width: 100px; /* half of diamond width*/
            content: "";
            position: absolute;
            bottom: 0px; /* equals diamond width*/
        }
        .diamond-inverted > img{
            height: 100%;
            width: auto;
        }

        .diamond-one-2{
            overflow: hidden;
            z-index: 0;
            margin-top: 10px;
            float: left;
            width: 200px;
            height: 250px;
            background-color: #FBA919;
            position: relative;
        }
        .diamond-one-2::before{
            border-color: white transparent transparent transparent;
            border-style: solid;
            border-width: 100px; /* half of diamond width*/
            content: "";
            position: absolute;
            top: 0px; /* equals diamond width*/
        }
        .diamond-one-2 > img{
            height: 100%;
            width: auto;
        }

        .diamond-two-2{
            overflow: hidden;
            z-index: 0;
            margin-top: 10px;
            float: left;
            width: 200px;
            height: 250px;
            background-color: #03A6E1;
            position: relative;
        }
        .diamond-two-2::before{
            border-color: white transparent transparent transparent;
            border-style: solid;
            border-width: 100px; /* half of diamond width*/
            content: "";
            position: absolute;
            top: 0px; /* equals diamond width*/
        }
        .diamond-two-2 > img{
            height: 100%;
            width: auto;
        }
        .diamond-inverted-2{
            margin-top: 10px;
            /* overflow: hidden; */
            float: left;
            width: 200px;
            height: 250px;
            background-color: #76C043;
            position: relative;
        }
        .diamond-inverted-2::before{
            border-color: transparent transparent #76C043 transparent;
            border-style: solid;
            border-width: 100px; /* half of diamond width*/
            content: "";
            z-index: 99;
            position: absolute;
            top: -200px; /* equals diamond width*/
        }
        .diamond-inverted-2 > h3{
            padding: 10px;
            color: white;
            font-family: Verdana;
            margin: 0;
            text-align: center;
            -webkit-box-sizing: border-box;
            -moz-box-sizing: border-box;
            box-sizing: border-box;
        }
        .diamond-inverted-2 > p{
            padding: 10px;
            color: white;
            font-family: Verdana;
            margin: 0;
            -webkit-box-sizing: border-box;
            -moz-box-sizing: border-box;
            box-sizing: border-box;
        }
        .diamond-inverted-2 > img{
            height: 100%;
            width: auto;
        }

Answer 2

Here is exactly what you are looking for, play with the values if the size is not correct. I assumed a width of 600px and a height of 400px and sized the rest accordingly.

---

EDIT

http://jsfiddle.net/ctwheels/9Lz0by3a/

---

The code is below

HTML

<!DOCTYPE html>
<html>
<head>
    <link rel="stylesheet" type="text/css" href="test.css">
    <link rel="stylesheet" type="text/css" href="test2.css">
</head>
<body>
<div class="container">
    <div class="left_top_div text_div">
        <div class="text_container">
            <h3>My title</h3>
            <h5>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec at erat purus. In lobortis mauris felis, vulputate eleifend risus tempor nec. Nullam id placerat enim. Mauris ac risus auctor, tincidunt nulla ac, porta odio. Ut eget vulputate nisl.</h5>
        </div>
    </div>
    <div class="center_bottom_div text_div">
        <div class="text_container">
            <h3>My title</h3>
            <h5>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec at erat purus. In lobortis mauris felis, vulputate eleifend risus tempor nec. Nullam id placerat enim. Mauris ac risus auctor, tincidunt nulla ac, porta odio. Ut eget vulputate nisl.</h5>
        </div>
    </div>
    <div class="right_top_div text_div">
        <div class="text_container">
            <h3>My title</h3>
            <h5>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec at erat purus. In lobortis mauris felis, vulputate eleifend risus tempor nec. Nullam id placerat enim. Mauris ac risus auctor, tincidunt nulla ac, porta odio. Ut eget vulputate nisl.</h5>
        </div>
    </div>

    <div class="left_bottom_div img_div"></div>
    <div class="center_top_div img_div"></div>
    <div class="right_bottom_div img_div"></div>

    <div class="arrow_box_pointdown_left"></div>
    <div class="arrow_box_pointup_center"></div>
    <div class="arrow_box_pointdown_right"></div>
</div>
</body>
</html>

CSS - test.css

.arrow_box_pointdown_left:after, .arrow_box_pointdown_left:before {
    border-style:solid;
    border-color: #FBA919 transparent transparent transparent;
    content:" ";
    height: 0;
    width: 0;
    position: absolute;
    pointer-events: none;
    top:200px;
}
.arrow_box_pointdown_left:after {
    border-top-color: #FBA919;
    border-width: 65px 100px 0 100px;
    left: 0px;
}
.arrow_box_pointdown_left:before {
    border-top-color: grey;
    border-width: 76px 116px 0 116px;
    left:-16px;
}
.arrow_box_pointup_center:after, .arrow_box_pointup_center:before {
    border-style:solid;
    border-color: #78C042 transparent transparent transparent;
    content:" ";
    height: 0;
    width: 0;
    position: absolute;
    pointer-events: none;
    transform:rotate(180deg);
    -ms-transform:rotate(180deg); /* IE 9 */
    -webkit-transform:rotate(180deg); /* Opera, Chrome, Safari */
    bottom:189px;
}
.arrow_box_pointup_center:after {
    border-top-color: #78C042;
    border-width: 65px 100px 0 100px;
    left: 200px;
}
.arrow_box_pointup_center:before {
    border-top-color: grey;
    border-width: 76px 116px 0 116px;
    left:184px;
}
.arrow_box_pointdown_right:after, .arrow_box_pointdown_right:before {
    border-style:solid;
    border-color: #0AA3DF transparent transparent transparent;
    content:" ";
    height: 0;
    width: 0;
    position: absolute;
    pointer-events: none;
    top:200px;
}
.arrow_box_pointdown_right:after {
    border-top-color: #0AA3DF;
    border-width: 65px 100px 0 100px;
    left: 400px;
}
.arrow_box_pointdown_right:before {
    border-top-color: grey;
    border-width: 76px 116px 0 116px;
    left:384px;
}

CSS - test2.css

.container {
    background-color:black;
    width:600px;
    height:400px;
    position:relative;
    overflow:hidden;
}
.text_div {
    width:200px;
    height:200px;
    position:absolute;
}
.text_container{
    width:180px;
    margin-top:-10px;
    margin-left:10px;
    margin-right:10px;
    color:white;
    text-align:center;
}
.img_div {
    width:200px;
    height:200px;
    position:absolute;
}
.left_top_div{
    top:0px;
    left:0px;
    background-color:#FBA919;
}

.center_bottom_div{
    bottom:0px;
    left:200px;
    background-color:#78C042;
}

.right_top_div{
    top:0px;
    right:0px;
    background-color:#0AA3DF;
}

.left_bottom_div{
    bottom:0px;
    left:0px;
    background-image:url("http://para.llel.us/themes/salutation-wp/wp-content/uploads/2011/09/sample-image-15.jpg");
    background-size:200px 200px;
}

.center_top_div{
    top:0px;
    left:200px;
    background-image:url("http://www.imgcan.com/upload/big/2014/01/10/52cfdc904e162.jpeg");
    background-size:200px 200px;
}

.right_bottom_div{
    bottom:0px;
    right:0px;
    background-image:url("http://4nabs.com/upload/local7/_branch_flower_ghibli_grass_highres_kanata_(ta220)_karigurashi_no_arrietty_leaf_minigirl_nature_running_studio_ghibli__Wt18RhKpR1.jpg");
    background-size:200px 200px;
}