How can I insert a small rectangle inside the rectangle? - css

Question

.
Here is my link http://jsfiddle.net/ashadee/xhaLqvav/.
Html code
Eat your lunch<br>
CSS
a{
font-size: 1.2em;
white-space: normal;
}
a.rectangle
{
width: 70%;
height: 5%;
border: 1px solid black;
padding: 5%;
margin-top: 0%;
background-color: #FAFAFA;
opacity: 0.4;
display: block;
text-decoration: none;
text-align: center;
font-family: Comic Sans MS;
box-shadow: 10px 10px 5px #888888;
}
how will I make the design like the one in the image? Should I use canvas property.

Answer 1

demo - http://jsfiddle.net/victor_007/xhaLqvav/2/
use pseudo element :after and :before for styling right box and rounded
a {
font-size: 1.2em;
white-space: normal;
}
a.rectangle {
width: 70%;
height: 5%;
border: 2px solid black;
padding: 5%;
margin-top: 0%;
background-color: #FAFAFA;
opacity: 0.4;
display: block;
text-decoration: none;
text-align: center;
font-size: 32px;
font-family: Comic Sans MS;
box-shadow: 10px 10px 5px #888888;
position: relative;
}
a:before {
content: '';
border-right: 2px solid black;
height: 100%;
position: absolute;
background: orange;
width: 50px;
top: 0;
bottom: 0;
left: 0;
}
a:after {
content: '';
width: 30px;
height: 30px;
border-radius: 50%;
background: black;
position: absolute;
left: 35px;
top: 50%;
transform: translatey(-50%)
}
Stanford
<br>