How to make a CSS ribbon?

Question

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>

http://codepen.io/anon/pen/egggrJ I think the spaces between those elements are the problem, as you're using inline block — Misiur, Jan 18 '17 at 18:58
Yes, either remove the whitespace or set the font-size to 0 on the parent element. See [Why is there an unexplainable gap between these inline-block div elements?](http://stackoverflow.com/questions/19038799/why-is-there-an-unexplainable-gap-between-these-inline-block-div-elements) — Marvin, Jan 18 '17 at 19:01

score 1 · Answer 1 · answered Jan 18 '17 at 18:59

1

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

answered Jan 18 '17 at 18:59

Jim Cote

1,746
3
15
26

Rob Scott · Answer 2 · 2017-01-18T19:11:25.200

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;
}

score 0 · Answer 3 · answered Jan 18 '17 at 18:59

0

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

answered Jan 18 '17 at 18:59

lampyridae

949
1
8
21

score 0 · Answer 4 · answered Jan 18 '17 at 18:59

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

How to make a CSS ribbon?

4 Answers4