Geek Answers Handbook

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

check the image at the link below (completely safe and secure)

http://ashteldemo.com/1231231.jpg

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

can anyone suggest something about this without background images?

+4
source share
4 answers

, HTML CSS, , , HTML CSS. , .

enter image description here

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;
        }
+3

, , , . 600 400 .

enter image description here

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

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;
}
+3

: (js ) (js bin )
, , .

html:

<div id="wrap">
  <div class="diamond"></div>
  <div class="diamond2">Your text here</div>
 </div>

CSS

#wrap {
 position:relative;
 margin-left:100px;
 margin-top:100px;
 width:150px;
 height:150px;
}

.diamond, .diamond2 {
position:absolute;
background-color:yellow;
border:1px solid yellow;
}

.diamond {
height:100px;
margin-left:20px;
width:98px;
/* Rotate div */
transform:rotate(45deg);
-ms-transform:rotate(45deg); /* IE 9 */
-webkit-transform:rotate(45deg); /* Opera, Chrome, and Safari */
}

.diamond2 {
height:200px;
color:black;
width:140px;
margin-top:50px;
text-indent:10px;
}

0

clip. HTML-, .

http://www.w3schools.com/cssref/pr_pos_clip.asp
-1

More articles:


All Articles