css3でイメージステッカー（リボン）を実装する方法

Question

私は次のイメージを実装したいと考えています。私が使用できる古い方法の1つに、PNG形式のテキスト付きのステッカーを保存してイメージをCSSの上に置きます。

私はプロのフロントエンドの開発者ではないが、私はCSS3の.MYの質問は、私はCSS3で画像のステッカーを実装するにはどうすればよいであると私はそれを実装することができると思いますか？

Answer 1

をしたいソリューションを提供することができるかもしれない擬似を使用して、コーナーのリボンを作成する方法についてcss-tricksからの参照ですコード。

.wrapper { 
 
    margin: 50px auto; 
 
    width: 280px; 
 
    height: 370px; 
 
    background: white; 
 
    border-radius: 10px; 
 
    -webkit-box-shadow: 0px 0px 8px rgba(0,0,0,0.3); 
 
    -moz-box-shadow: 0px 0px 8px rgba(0,0,0,0.3); 
 
    box-shadow:   0px 0px 8px rgba(0,0,0,0.3); 
 
    position: relative; 
 
    z-index: 90; 
 
} 
 

 
.ribbon-wrapper-green { 
 
    width: 85px; 
 
    height: 88px; 
 
    overflow: hidden; 
 
    position: absolute; 
 
    top: -3px; 
 
    right: -3px; 
 
} 
 

 
.ribbon-green { 
 
    font: bold 15px Sans-Serif; 
 
    color: #333; 
 
    text-align: center; 
 
    text-shadow: rgba(255,255,255,0.5) 0px 1px 0px; 
 
    -webkit-transform: rotate(45deg); 
 
    -moz-transform: rotate(45deg); 
 
    -ms-transform:  rotate(45deg); 
 
    -o-transform:  rotate(45deg); 
 
    position: relative; 
 
    padding: 7px 0; 
 
    left: -5px; 
 
    top: 15px; 
 
    width: 120px; 
 
    background-color: #BFDC7A; 
 
    background-image: -webkit-gradient(linear, left top, left bottom, from(#BFDC7A), to(#8EBF45)); 
 
    background-image: -webkit-linear-gradient(top, #BFDC7A, #8EBF45); 
 
    background-image: -moz-linear-gradient(top, #BFDC7A, #8EBF45); 
 
    background-image:  -ms-linear-gradient(top, #BFDC7A, #8EBF45); 
 
    background-image:  -o-linear-gradient(top, #BFDC7A, #8EBF45); 
 
    color: #6a6340; 
 
    -webkit-box-shadow: 0px 0px 3px rgba(0,0,0,0.3); 
 
    -moz-box-shadow: 0px 0px 3px rgba(0,0,0,0.3); 
 
    box-shadow:   0px 0px 3px rgba(0,0,0,0.3); 
 
} 
 

 
.ribbon-green:before, .ribbon-green:after { 
 
    content: ""; 
 
    border-top: 3px solid #6e8900; 
 
    border-left: 3px solid transparent; 
 
    border-right: 3px solid transparent; 
 
    position:absolute; 
 
    bottom: -3px; 
 
} 
 

 
.ribbon-green:before { 
 
    left: 0; 
 
} 
 
.ribbon-green:after { 
 
    right: 0; 
 
}​

<div class="wrapper"> 
 
     <div class="ribbon-wrapper-green"><div class="ribbon-green">News</div></div> 
 
</div>​

Answer 2

は、画像にリボンを付けることを意味しますか？ここ 外観は、あなたがここに

http://www.cssportal.com/css-ribbon-generator/

Answer 3

<a href="https://github.com/you"><img style="position: absolute; top: 0; left: 0; border: 0;" src="https://camo.githubusercontent.com/82b228a3648bf44fc1163ef44c62fcc60081495e/68747470733a2f2f73332e616d617a6f6e6177732e636f6d2f6769746875622f726962626f6e732f666f726b6d655f6c6566745f7265645f6161303030302e706e67" alt="Fork me on GitHub" data-canonical-src="https://s3.amazonaws.com/github/ribbons/forkme_left_red_aa0000.png"></a> 

Demo2

Demo