Trying to put this on an imaged background. I've got it to semi-work but doesn't attach for some reason. Is it wrong to make it as 2 elements trying to connect them? Is there a way to make it one element, or a better way to do it?
Here's what it is now:
http://codepen.io/anon/pen/MJJJog
.wrapper {
text-align: center;
}
p {
font-family: arial;
font-weight: normal;
margin: 0;
padding: 0;
text-align: left;
}
.header__ribbon {
padding: 10px 20px;
background-color: #ad0304;
color: #fff;
width: 70%;
max-width: 350px;
text-transform: uppercase;
font-size: 24px;
display: inline-block;
vertical-align: middle;
}
.header__ribbon__point {
margin: 0;
width: 0;
height: 0;
border-top: 35px solid #ad0304;
;
border-right: 35px solid transparent;
border-bottom: 35px solid #ad0304;
;
display: inline-block;
vertical-align: middle;
border-left: 10px solid #ad0304;
}
.header__ribbon--secondaryText {
font-size: 16px;
}
<div class="wrapper">
<div class="header__ribbon">
<p>Complimentary Event -</p>
<p class="header__ribbon--secondaryText">
mark your calenders for <span class="text__B">march 1<sup>st</sup>!</span>
</p>
</div>
<div class="header__ribbon__point"></div>
</div>