Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

Angled, wrapping CSS ribbon over image

Tags:

css

ribbon

It is possible to achieve this ribbon using only CSS?

Example image of ribbon I'm trying to create in CSS

like image 404
AlecRust Avatar asked Oct 25 '12 15:10

AlecRust


1 Answers

.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;
}​
<div class="box">
    <div class="ribbon">
        <div class="txt">
            Example Text
        </div>
    </div>
<div>​
like image 112
Jason Avatar answered Oct 08 '22 09:10

Jason