How to make a CSS ribbon? [duplicate] - html

Question

This question already has answers here:
How to remove the space between inline/inline-block elements?
(41 answers)
Closed 6 years ago.
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>

Answer 1

There's a space between the 2 header DIV's. You can set font-size:0 in your wrapper class.

Answer 2

It's better to use psuedo elements, before and after IMO. Here's a fiddle for you.
https://css-tricks.com/pseudo-element-roundup/
https://jsfiddle.net/vvupo6ha/1/
<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>
.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;
position: relative;
}
.header__ribbon:before,
.header__ribbon:after {
position: absolute;
content: '';
top:0;
border-top: 35px solid #ad0304;
border-bottom: 35px solid #ad0304;
}
.header__ribbon:after {
right: -35px;
border-right: 35px solid transparent;
border-left: 10px solid #ad0304;
}
.header__ribbon:before {
left:-35px;
top:0;
border-right: 10px solid #ad0304;
border-left: 35px solid transparent;
}

Answer 3

You've styled .header__ribbon and .header__ribbon__point as inline-blocks, so inline rules apply: you have to remove all spaces between them.

Answer 4

I would use flexbox on the .wrapper
.wrapper{
text-align:center;
display: flex;
justify-content: 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;
}
http://codepen.io/anon/pen/xgggjq