Diamond in rectangle HTML & CSS3 - html

Question

I would like to make a diamond in a rectangle. I've already did it with a square :
.box {
width:100px;
height:100px;
background:orange;
z-index:1;
position:relative;
}
.box:before {
position:absolute;
content:'';
width:70.71%;
height:70.71%;
transform: rotate(45deg);
background: red;
top: 15%;
left: 15%;
}
<div class="box"></div>
But I want to make it like this :
The rectangle is responsive so it's never the same size. Any idea ?
Thanks a lot

Answer 1

This approach uses two triangles generated using CSS border.
I don't think you can use % for borderwidth, so I have used viewport units instead.
.box {
width: 50vw;
height: 25vw;
background: orange;
z-index: 1;
position: relative;
}
.box:before,
.box:after {
content: '';
position: absolute;
width: 0;
height: 0;
}
.box:before {
border-right: solid 25vw red;
border-top: solid 12.5vw transparent;
border-bottom: solid 12.5vw transparent;
}
.box:after {
right: 0;
border-left: solid 25vw red;
border-top: solid 12.5vw transparent;
border-bottom: solid 12.5vw transparent;
}
<div class="box"></div>

Answer 2

You're attempting to create a diamond by modifying a rectangle. If you tried that with a paper rectangle, you'd understand it's not the simplest way to go about it.
You could use clip-path:
.diamond {
background-color: #eee;
-webkit-clip-path: polygon(50% 0%, 100% 50%, 50% 100%, 0% 50%);
clip-path: polygon(50% 0%, 100% 50%, 50% 100%, 0% 50%);
margin: 0 auto;
text-align: center;
padding: 2rem;
}
<div class="diamond">I'm a diamond</div>
... and all that's left for you to do is to set it's width, height (or min-* / max-* for any of them) in order to control its proportion responsively.
Do note CSS clip-path is currently supported by only ~88% of actively used browsers most notably lacking support by IE and Edge.
If you need support for those, the only way to do it is by using two levels of wrappers and construct the outline from ::before and ::after pseudos of those wrappers.