info@anzum.com

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>

Subscribe To Our Newsletter

Subscribe To Our Newsletter

Join our mailing list to receive the latest news and updates from our team.

You have Successfully Subscribed!

Discover what's new at Divi Extended

Discover what's new at Divi Extended

Connect with Divi Extended for info on our new products and updates.

Welcome on Board

%d bloggers like this: