How to Create Diamond Shape Using HTML5 and CSS3 with Background Image

You can create a cool diamond shape using HTML5 and CSS3 with an image in the background with outer border in your own color. Here is a CSS and HTML code snipped that renders a diamond shape with an image or WordPress logo in the background. You can upload an image that fits right to the layout.


.diamond, .dia {
margin: 0 auto;
transform-origin: 50% 50%;
overflow: hidden;
width: 150px;
height: 150px;
}
.diamond {
transform: rotate(45deg) translateY(-25px) translateX(-25px);
margin-top: 100px;
border-bottom: 4px solid rgb(145, 37, 37);
border-right: 4px solid rgb(145, 37, 37);
}
.diamond .dia {
width: 380px;
height: 380px;
transform: rotate(-45deg);
background: url(https://anzum.com/wp-content/uploads/2014/07/WordPress.png) no-repeat;
background-size: 122%;
border-top: 6px solid rgb(145, 37, 37);
background-position: top center;
}
.diamond img {
width: 100%;
height: auto;
}
.diamond:before {
content: "";
position: absolute;
right: 127.5px;
top: 129px;
height: 1px;
width: 27%;
z-index: 9999;
transform: rotate(90deg);
border-bottom: 4px solid rgb(145, 37, 37);
}
.diamond:after {
content: "";
position: absolute;
left: 112px;
top: -1.5px;
height: 1px;
width: 27%;
z-index: 9999;
border-bottom: 4px solid rgb(145, 37, 37);
}
@media screen and (max-width:640px){
.diamond, .dia {
width: 100px;
height: 100px;
}
.diamond .dia {
width: 250px;
height: 250px;
}
.diamond:before {
right: 81px;
top: 85px;
width: 32%;
}
.diamond:after {
left: 72px;
top: -0.6px;
width: 31%;
}
}


Here is the HTML snipped that will render the shape on a webpage (don’t forget to remove the space after <.
< div class="diamond">
< div class="dia">
< /div>
< /div>