我正在制作上面图片的 html，我已经尝试了几种不同的方法使用 css3、html5 来实现它，但我认为不使用背景图片是不可能的。
来源:http://ashteldemo.com/1231231.jpg
任何人都可以建议在没有背景图像的情况下实现这个吗？
最佳答案
我创建了一个仅使用 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;
}
关于html - 如何在不使用背景图像的情况下使用 css3 在 html div 中制作菱形...？，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/25159791/