html - 如何在不使用背景图像的情况下使用 css3 在 html div 中制作菱形...？

Question

我正在制作上面图片的 html，我已经尝试了几种不同的方法使用 css3、html5 来实现它，但我认为不使用背景图片是不可能的。

_{来源:http://ashteldemo.com/1231231.jpg}

任何人都可以建议在没有背景图像的情况下实现这个吗？

Answer 1

我创建了一个仅使用 HTML 和 CSS 的示例，它有点接近图像版本，但我认为仅使用 HTML 和 CSS 构建它是不切实际的。查看。

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