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



Donate For Us

If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!