how to make a border on a css-only created image - html

Question

I have created a ribbon with css only. Now i want to make a 1px grey border around it. But the left and right side of the image are created already with a css border. is this possible to do that?
The image should look like this (you see the 1 px grey border):
This is the html and css i use to create the image:
.yellow-ribbon-top-left {
width: 0;
height: 0;
border-style: solid;
border-width: 30px 30px 0 0;
border-color: #eedc08 transparent transparent transparent;
float: left;
}
.yellow-ribbon-mid {
width: 120px;
height: 30px;
float: left;
background-color: #eedc08;
}
.yellow-ribbon-bottom-right {
width: 0;
height: 0;
border-style: solid;
border-width: 0 0 30px 30px;
float: left;
border-color: transparent transparent #eedc08 transparent;
}
<div class="yellow-ribbon-bottom-right"></div>
<div class="yellow-ribbon-mid"></div>
<div class="yellow-ribbon-top-left"></div>

Answer 1

You can simplify you code by using skew transformation then you can easily adjust border:
.yellow-ribbon {
width: 120px;
height: 30px;
margin:20px;
background-color: #eedc08;
border:1px solid #000;
transform:skew(-30deg);
}
<div class="yellow-ribbon">
</div>
By the way if you want to keep your actual code you can rely on pseudo-element like this (but i don't recommend this solution as it makes the code even more complicated and we have above a simple one):
.yellow-ribbon-top-left {
width: 0;
height: 0;
border-style: solid;
border-width: 30px 30px 0 0;
border-color: #eedc08 transparent transparent transparent;
float: left;
position: relative;
top: 1px;
}
/* create border around the left part */
.yellow-ribbon-top-left:before {
content: "";
position: absolute;
border-style: solid;
border-width: 32px 32px 0 0;
border-color: #000 transparent transparent transparent;
bottom: -1px;
z-index:-1
}
/* */
.yellow-ribbon-mid {
width: 120px;
height: 30px;
float: left;
background-color: #eedc08;
border-top: 1px solid;
border-bottom: 1px solid;
position: relative;
}
.yellow-ribbon-bottom-right {
width: 0;
height: 0;
border-style: solid;
border-width: 0 0 30px 30px;
float: left;
border-color: transparent transparent #eedc08 transparent;
position:relative;
top:1px;
}
/* create border around the right part */
.yellow-ribbon-bottom-right:before {
content: "";
position: absolute;
border-style: solid;
border-width: 0 0 32px 32px;
border-color: transparent transparent #000 transparent;
top: -1px;
right: 0;
z-index:-1
}
/* */
<div class="yellow-ribbon-bottom-right"></div>
<div class="yellow-ribbon-mid"></div>
<div class="yellow-ribbon-top-left"></div>