Attach 2 divs with a perspective box
Want to create a ribbon like this:
Currently my attempt looks like this:
Here is the code I wrote for the product:
.ribbon {
width: 200px;
display:inline-block;
margin:0px; //remove any margins to prevent breaking at each element
box-sizing:border-box; //allow paddings to not interfere with element width
}
.front {
float: left;
display: inline;
width: 45%;
background: #EA0B1D;
border-radius: 6px 0px 0px 6px;
padding-top: 15px;
padding-bottom: 15px;
}
.middle {
float: left;
display: inline;
width: 5%;
background: #B1071D;
padding-top: 15px;
padding-bottom: 15px;
transform: rotate(0deg) skewX(45deg);
-webkit-transform: rotate(0deg) skewX(45deg);
-ms-transform: rotate(0deg) skewX(45deg);
}
.back {
float: right;
display: inline;
width: 45%;
background: #EA0B1D;
border-radius: 0px 6px 6px 0px;
padding-top: 15px;
padding-bottom: 15px;
margin-top: 15px;
}
span {
color: white;
padding: 15px;
text-align: center;
}
<div class="ribbon">
<div class="front">
<span>Text</span>
</div>
<div class="middle">
<span> </span>
</div>
<div class="back">
<span>Text</span>
</div>
</div>
You can also see the result on my JSFiddle here
Let me know if I am doing anything wrong.
Thank.
+3
source to share
1 answer
Based on your decision.
The first thing I noticed was that instead of skewing along the x-axis, you should skew 45 degrees along the y-axis.
transform: rotate(0deg) skewY(45deg);
This will give you the desired shape for the middle section.
Then it's just a matter of aligning the shapes using margins within the .middle
and classes .back
.
.ribbon {
width: 200px;
display: inline-block;
margin: 0px;
box-sizing: border-box;
}
.front {
float: left;
display: inline;
width: 45%;
background: #EA0B1D;
border-radius: 6px 0px 0px 6px;
padding-top: 15px;
padding-bottom: 15px;
}
.middle {
float: left;
display: inline;
width: 5%;
margin-top: 5px; /* added this line */
background: #B1071D;
padding-top: 15px;
padding-bottom: 15px;
transform: rotate(0deg) skewY(45deg); /* changed skewX to skewY */
-webkit-transform: rotate(0deg) skewY(45deg); /* changed skewX to skewY */
-ms-transform: rotate(0deg) skewY(45deg); /* changed skewX to skewY */
}
.back {
float: right;
display: inline;
margin-top: 10px; /* changed 15px to 10px */
margin-right: 10px; /* added this line */
width: 45%;
background: #EA0B1D;
border-radius: 0px 6px 6px 0px;
padding-top: 15px;
padding-bottom: 15px;
}
span {
color: white;
padding: 15px;
text-align: center;
}
<div class="ribbon">
<div class="front">
<span>Text</span>
</div>
<div class="middle">
<span> </span>
</div>
<div class="back">
<span>Text</span>
</div>
</div>
+5
source to share