This looks pretty cool, so let’s do it.

code

HTML – one container, one ribbon

<div class="container">
  <div class="ribbon">
    hello,world
  </div>
</div>
Copy the code

css

.container {
    width: 500px;
    height: 500px;
    position: relative;
    overflow: hidden;
    border: 1px solid #eee;
}
:root {
    --ribbonWidth: 200px;
    /* Calculate the offset according to the Pythagorean theorem: 200*200 = x^2 + x^2 */
    --offsetX: 58.58 px.; 
}
.ribbon {
    display: inline-block;
    box-sizing: border-box;
    text-align: center;
    /* Locate in the upper right corner */
    position: absolute;
    top: 0;
    right: 0;
    background: #d4f5f6;
    padding: 10px 0;
    width: var(--ribbonWidth);
    
    /* Positioning ribbon */
    /* Rotate with lower left corner as anchor */
    transform-origin: bottom left;
    transform: translateY(-100%) translateX(var(--offsetX)) rotate(45deg);
}
Copy the code

translateY(-100%)

translateX(var(--offsetX))

rotate(45deg)

overflow: hidden

done!

Online code demo jsbin.com/jamajaj/edi…

You can put it anywhere you want!