Right Corner Ribbon on a Div CSS

How can I make a 45 degree responsive ribbon with folded corner?

You can try like below:

.container {
  width: 200px;
  height: 150px;
  position: relative;
  display:inline-block;
  margin: 10px;
  background: lightblue;
}

.stack-top {
  /* adjust the below to control the shape */
  --d:5px; 
  --g:16px;
  --c:#333;
  /**/

  position: absolute;
  top: 0;
  right: 0;
  transform: translate(29.29%, -100%) rotate(45deg); /* 29.29% = 100%*(1 - cos(45deg)) */
  color: #fff;
  text-align: center;
  width: 100px;
  transform-origin: bottom left;
  padding:5px 0 calc(var(--d) + 5px);
  background:
    linear-gradient(135deg, transparent var(--g), var(--c) calc(var(--g) - 0.3px)) left,
    linear-gradient(-135deg,transparent var(--g), var(--c) calc(var(--g) - 0.3px)) right;
  background-size:51% 100%;
  background-repeat:no-repeat;
  clip-path:polygon(0 0,100% 0,100% 100%, calc(100% - var(--d)) calc(100% - var(--d)), var(--d) calc(100% - var(--d)),0 100%)
}

<div class="container">
  <div class="stack-top">1Month</div>
</div>

<div class="container">
  <div class="stack-top" style="--d:0px;--g:19px;width:120px;--c:blue">1Month</div>
</div>

<div class="container">
  <div class="stack-top" style="--d:8px;--g:17px;width:80px;--c:red">XX</div>
</div>

<div class="container">
  <div class="stack-top" style="--d:10px;--g:20px;width:200px;--c:green">1Month</div>
</div>

Round ribbon at the bottom right corner with icon and text in it

please look at this:

https://codepen.io/anon/pen/aQmJjy?editors=1100

/* The ribbons */
.corner-ribbon {  font-weight: bold;  width: 50px;  background: #e43;  position: absolute;  bottom: 5px;  right: -30px;  text-align: center;  line-height: 40px;  letter-spacing: 1px;  color: #f0f0f0;  transform: rotate(5deg);  -webkit-transform: rotate(5deg);  border-radius: 65px;}

/* Custom styles */
.corner-ribbon.sticky {  position: fixed;}
.corner-ribbon.shadow {  box-shadow: 0 0 3px rgba(0, 0, 0, 0.3);}

/* Different positions */
.corner-ribbon.top-left {  bottom: -50px;  right: -100px;  transform: rotate(-270deg);  -webkit-transform: rotate(-315deg);  background-color: red;  width: 226px;  height: 125px;}
.corner-ribbon.red {  background: #e43;}
.rotate-text {  transform: rotate(270deg);  -webkit-transform: rotate(315deg);  position: absolute;  left: 15px;  top: 0;  font-family: sans-serif;  display: flex;  flex-direction: column;  justify-content: center;  item-align: center;  height: 120px;}

<link href="https://use.fontawesome.com/releases/v5.5.0/css/all.css" rel="stylesheet" />

<div class="corner-ribbon top-left sticky red shadow">  <div class="rotate-text">    <span>Some text</span>    <i class="fas fa-camera fa-2x"></i>  </div></div>

Putting a CSS ribbon on the opposite side

Just add to .ribbon:

transform: rotate(-45deg);
left: -30px;

and position the container with:

left: -3px;

insteed of right value.

FIDDLE

Angled ribbon css over image

Remove .corner-ribbon.sticky {position: fixed;}

You want each corner ribbon to be positioned absolutely, as calculated from their own closest positioned ancestor. This is what absolute positioning does.

position: fixed will calculate its position from the viewport, and this is not what you want here.

Add .card {overflow: hidden;}

/* The ribbons */
.corner-ribbon {  font-weight: bold;  width: 200px;  background: #e43;  position: absolute;  top: 25px;  left: -50px;  text-align: center;  line-height: 100px;  letter-spacing: 1px;  color: #f0f0f0;  transform: rotate(-45deg);  -webkit-transform: rotate(-45deg);}

/* Custom styles */
.corner-ribbon.shadow {  box-shadow: 0 0 3px rgba(0, 0, 0, .3);}

/* Different positions */
.corner-ribbon.top-left {  top: -10px;  left: -103px;  transform: rotate(-45deg);  -webkit-transform: rotate(-45deg);  background-color: red;  width: 256px;  height: 75px;}
.card {  overflow: hidden;}

<link href="https://getbootstrap.com/docs/4.1/dist/css/bootstrap.min.css" rel="stylesheet"/><main role="main">  <div class="album py-5 bg-light">    <div class="container">
      <div class="row">        <div class="col-md-4">          <div class="card mb-4 shadow-sm">            <div class="corner-ribbon top-left sticky shadow">SOLD</div>            <img class="card-img-top" src="http://dummyimage.com/400x400/000/fff?text=Item1" alt="Card image cap">            <div class="card-body">              <p class="card-text">This is a wider card with supporting text below as a natural lead-in to additional content. This content is a little bit longer.</p>              <div class="d-flex justify-content-between align-items-center">                <div class="btn-group">                  <button type="button" class="btn btn-sm btn-outline-secondary">View</button>                  <button type="button" class="btn btn-sm btn-outline-secondary">Edit</button>                </div>                <small class="text-muted">9 mins</small>              </div>            </div>          </div>        </div>      </div>    </div>  </div></main>

Change the css-ribbon position from right to left on a div

Here is a live fiddle:
http://jsfiddle.net/covn07uh/14/

HTML (The same):

<div class="content-box">
    <div id="ribbon-container">
        <a href="#" id="ribbon">CSS-Ribbon</a>
    </div>
</div>

The CSS:

* {
    padding: 0;
    /* Standard Reset, and we're adding box-sizing:border-box because it's awesome. */
    margin: 0;
    box-sizing: border-box;
    -moz-box-sizing: border-box;
    -webkit-box-sizing: border-box;
    -webkit-transition: all 0s ease-in-out;
    -moz-transition: all 0s ease-in-out;
    -o-transition: all 0s ease-in-out;
    transition: all 0s ease-in-out;
}
.content-box {
    width: 100%;
    height: 400px;
    max-width: 80%;
    margin: 94px auto 0 auto;
    position: relative;
    /* So we can position the banner within the box */
    background: gray;
    border: 5px solid white;
    box-shadow: 0 0 10px rgba(0, 0, 0, .3);
    -moz-box-shadow: 0 0 10px rgba(0, 0, 0, .3);
    -webkit-box-shadow: 0 0 10px rgba(0, 0, 0, .3);
}
#ribbon-container {
    position: absolute;
    top: 15px;
    left: -20px;
    overflow: visible;
    /* so we can see the pseudo-elements we're going to add to the anchor */
    font-size: 18px;
    /* font-size and line-height must be equal so we can account for the height of the banner */
    line-height: 18px;
}
#ribbon-container:before {
    content: "";
    height: 0;
    width: 0;
    display: block;
    position: absolute;
    top: 3px;
    right: 0;
    border-top: 29px solid rgba(0, 0, 0, .3);
    /* These 4 border properties create the first part of our drop-shadow */
    border-bottom: 29px solid rgba(0, 0, 0, .3);
    border-left: 29px solid rgba(0, 0, 0, .3);
    border-right: 29px solid transparent;
}
#ribbon-container:after {
    /* This adds the second part of our dropshadow */
    content: "";
    height: 3px;
    background: rgba(0, 0, 0, .3);
    display: block;
    position: absolute;
    bottom: -3px;
    right: 58px;
    left: 3px;
}
#ribbon-container a {
    display: block;
    padding: 20px;
    position: relative;
    /* allows us to position our pseudo-elements properly */
    background: #0089d0;
    overflow: visible;
    height: 58px;
    margin-right: 29px;
    color: #fff;
    text-decoration: none;
}
#ribbon-container a:after {
    /* this creates the "folded" part of our ribbon */
    content: "";
    height: 0;
    width: 0;
    display: block;
    position: absolute;
    bottom: -15px;
    left: 0;
    border-top: 15px solid #004a70;
    border-left: 15px solid transparent;
}
#ribbon-container a:before {
    /* this creates the "forked" part of our ribbon */
    content: "";
    height: 0;
    width: 0;
    display: block;
    position: absolute;
    top: 0;
    right: -29px;
    border-top: 29px solid #0089d0;
    border-bottom: 29px solid #0089d0;
    border-left: 29px solid transparent;
    border-right: 29px solid transparent;
}
#ribbon-container a:hover {
    background: #009ff1;
}
#ribbon-container a:hover:before {
    /* this makes sure that the "forked" part of the ribbon changes color with the anchor on :hover */
    border-top: 29px solid #009ff1;
    border-bottom: 29px solid #009ff1;
}

corner ribbon for resposive image

use position:relative in the parent (.ribbon-holder) and absolute in the child (.ribbon)

.ribbon-holder {  overflow: hidden;  position: relative}.ribbon {  position: absolute;  background: yellow;  color: black;  transform: rotate(-45deg);  text-align: center;  top: 32px;  left: -32px;  width: 145px;}

<div class="ribbon-holder">  <div class="ribbon ribbon-holder">Free Shipping!</div>  <a href="http://www.somesite.com">    <img src="http://www.adventurouskate.com/wp-content/uploads/2016/01/planes-black-shower-curtain.jpg" alt="Shower Curtin" />  </a></div>

CSS corner ribbon without rotate

@Dedi Ananto : Please take note of the following code:

<div class="arrow-right"></div>

.arrow-right {
    width: 0px;
    height: 0px;
    border-top: 0px solid transparent;
    border-bottom: 70px solid transparent;
    border-left: 60px solid red;
}

Hope this Helps..

Regards,
Karan