CSSリボンを作るには？

Question

イメージされた背景にこれを置こうとしています。私はそれを半作業に持っていますが、何らかの理由で添付しません。それらを接続しようとする2つの要素として作るのは間違っていますか？それを1つの要素、あるいはより良い方法にする方法はありますか？

ここで、それは今あるものです：

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

あなたはとてもインラインルールが適用され、インラインブロックとして.header__ribbonと.header__ribbon__pointをスタイリングしました：あなたがする必要はありそれらの間のすべてのスペースを削除します。

Answer 2

は、私は2ヘッダーDIVの間にスペースがあります.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

Answer 3

にフレキシボックスを使用します。ラッパークラスでfont-size：0を設定することができます。

Answer 4

擬似要素、beforeおよびafter IMOを使用する方が良いです。ここにあなたのためのフィドルがあります。

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