パッケージプランに広告バナーを追加する

Question

これは他のサイトで行われているのですが、HTMLとCSSのみを使用して外部画像を持たずに自分のサイトに追加する方法があれば賞賛されました。だから、私のサイトには私のページに「カード」があり、そのカードにはそれぞれのカードといくつかのプランが他のものより優れていて、私が表示したいパッケージがあります。カードの右上隅にあるこのようなもの http://cliparts101.com/files/10/370381D4E69D42D621F694F53A4E045D/Banner_137.png 「最高の価値」というテキストがあります。純粋でコンテナにpseudoelements後：前：あなたはこのような本使用するものとしてリボンを作ることができ、私は画像だけオーバーレイテキストでこれを行うために持っているか、CSS

<div class="col-md-4"> 
      <div class="card"> 
       <div class="cardTitle"> 
        <h1 class="text-center">Basic Plan</h1> 
       </div> 
       <hr class="cardRuler"> 
       <div class="cardBody"> 
        <ul> 
         <li>Lorem</li> 
         <li>Lorem</li> 
         <li>Lorem</li> 
         <li>Lorem</li> 
        </ul> 
       </div> 
       <div class="cardFooter"> 
        <button class="btn button-Primary center-block">Learn More</button> 
       </div> 
      </div> 
     </div> 

Answer 1

でそれを行う方法はありますでしょうCSS。

.ribbon { 
 
font-size: 16px !important; 
 
width: 50%; 
 
position: relative; 
 
background: #ba89b6; 
 
color: #fff; 
 
text-align: center; 
 
padding: 1em 2em; 
 
margin: 2em auto 3em; 
 
} 
 
.ribbon:before, .ribbon:after { 
 
content: ""; 
 
position: absolute; 
 
display: block; 
 
bottom: -1em; 
 
border: 1.5em solid #986794; 
 
z-index: -1; 
 
} 
 
.ribbon:before { 
 
left: -2em; 
 
border-right-width: 1.5em; 
 
border-left-color: transparent; 
 
} 
 
.ribbon:after { 
 
right: -2em; 
 
border-left-width: 1.5em; 
 
border-right-color: transparent; 
 
} 
 
.ribbon .ribbon-content:before, .ribbon .ribbon-content:after { 
 
content: ""; 
 
position: absolute; 
 
display: block; 
 
border-style: solid; 
 
border-color: #804f7c transparent transparent transparent; 
 
bottom: -1em; 
 
} 
 
.ribbon .ribbon-content:before { 
 
left: 0; 
 
border-width: 1em 0 0 1em; 
 
} 
 
.ribbon .ribbon-content:after { 
 
right: 0; 
 
border-width: 1em 1em 0 0; 
 
}

<div class="ribbon"> 
 
    <strong class="ribbon-content">Random Content</strong> 
 
</div>