각도가있는 CSS 리본을 이미지 위에 놓기

Question

CSS 만 사용하여이 리본을 만들 수 있습니까?

Answer 1

html로 :

<div class="box"> 
    <div class="ribbon"> 
     <div class="txt"> 
      Example Text 
     </div> 
    </div> 
<div>​ 

CSS의 :

.box { 
    width: 300px; 
    height: 300px; 
    background-color: #a0a0a0; 
    position: relative; 
} 
.ribbon { 
    -webkit-transform: rotate(-45deg); 
    -moz-transform: rotate(-45deg); 
     -ms-transform: rotate(-45deg); 
     -o-transform: rotate(-45deg); 
      transform: rotate(-45deg); 
    border: 25px solid transparent; 
    border-top: 25px solid #757575; 
    position: absolute; 
    bottom: 20px; 
    right: -50px; 
    padding: 0 10px; 
    width: 120px; 
    color: white; 
    font-family: sans-serif; 
    size: 11px; 
} 
.ribbon .txt { 
    position: absolute; 
    top: -20px; 
    left: 20px; 
}​ 

예 :.

http://codepen.io/gilluminate/pen/jusoI

(PS 모든하지만, 로테이션은 여전히 ​​예전부터 작동 할 것입니다. 브라우저를 사용하십시오.)

Answer 2

예를 수행 할 수 있습니다. 예를 들어

: CSS에서

<div id="full_img_content"> 
<span id="img_ribbon"> 
    <img src="#" id=""> 
</span> 
</div> 

당신이

#full_img_content 
{ 
float:left; 
width:400px; (slightly larger than image width) 
height:400px; (slightly larger than image height) 
} 
#full_img_content img // your image (if your img have this size) 
{ 
width:390px; 
height:390px; 
z-index: 1; 
} 
#img_ribbon 
{ 
background-image: url("link to img"); 
background-positiom: x-pos y-pos bottom right; 
z-index: 2; 
} 

Answer 3

그것은 불행하게도, 보편적으로 지원하지 않는 일부 CSS의 변환과 가능성이있을 것입니다. 여기에 (빠른) 예를 참조하십시오 http://codepen.io/anon/pen/kBpcK