纯 html + css 实现彩带效果

这个效果看起来很酷，我们来实现一下。

代码

html - 一个容器，一个彩带

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

css

.container {
    width: 500px;
    height: 500px;
    position: relative;
    overflow: hidden;
    border: 1px solid #eee;
}
:root {
    --ribbonWidth: 200px;
    /* 根据勾股定理计算出偏移量: 200*200 = x^2 + x^2 */
    --offsetX: 58.58px; 
}
.ribbon {
    display: inline-block;
    box-sizing: border-box;
    text-align: center;
    /* 定位在右上角 */
    position: absolute;
    top: 0;
    right: 0;
    background: #d4f5f6;
    padding: 10px 0;
    width: var(--ribbonWidth);
    
    /* 定位彩带 */
    /* 以左下角为锚点进行旋转操作 */
    transform-origin: bottom left;
    transform: translateY(-100%) translateX(var(--offsetX)) rotate(45deg);
}

translateY(-100%)

translateX(var(--offsetX))

rotate(45deg)

overflow: hidden

done!

在线代码演示 jsbin.com/jamajaj/edi…

想放哪个角落都可以！