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

时间：2014-08-06 11:55:47

标签： html html5 css3 css-shapes

检查以下链接的图像（完全安全且受保护）

http://ashteldemo.com/1231231.jpg

我正在制作上面图片的html，我已经尝试了几种不同的方式使用css3，html5来实现这一点，但我认为没有使用背景图像是不可能的。

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

4 个答案:

答案 0 :(得分：4)

我创建了一个仅使用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;
        }

答案 1 :(得分：3)

以下是您正在寻找的内容，如果尺寸不正确，请使用值。我假设宽度为600px 且高度为400px 并相应地调整其余部分。

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

答案 2 :(得分：0)

检查出来：Demo (js fiddle) Demo (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;
}

答案 3 :(得分：-1)

您是否查看了clip属性。它允许您从HTML参考图像中剪切出形状。

http://www.w3schools.com/cssref/pr_pos_clip.asp
相关问题
最新问题