패키지 계획에 광고 배너 추가

Question

다른 사이트에서이 작업을 수행 한 결과 HTML 및 CSS 만 사용하여 외부 이미지를 사용하지 않고도 내 사이트에 추가 할 수있는 방법이 있다면 좋았습니다. 그래서 그것이 내 사이트에 있습니다. 내 페이지에는 "카드"가 있고 각 카드에는 카드가 있고 다른 카드에는 다른 카드보다 나은 패키지가 있고 그 카드에 표시하고 싶은 카드가 있습니다. 카드의 오른쪽 상단 모서리에있는 이와 비슷한 것 http://cliparts101.com/files/10/370381D4E69D42D621F694F53A4E045D/Banner_137.png 그리고 "최고의 가치"라는 텍스트가 있습니다. 나는 이미지와 이렇게 그냥 텍스트를 오버레이 또는 당신은 등이 사용하는 것과 리본을 만들 수 있습니다

<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를 함께 할 수있는 방법이있다 할 것입니다 : 전 : 순수의 용기에 pseudoelements 후 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>