响应式布局中的角带

Question

JSFiddle

我正在尝试为响应式布局制作角色带。

我使用了以下方法来定位它：

position: absolute;
top: 10px;
left: -100px;

我有色带，当用户调整屏幕大小时我的问题出现了，我怎样才能总是让它位于角落的色带网站？我试过使用不同的百分比偏移，但它时好时坏。

Answer 1

不要将 width:100% 用于您的色带

fiddle

.ribbon{
    position: absolute;
    background: black;
    color: white;
    transform: rotate(-45deg);
    text-align: center;
    top: 10px;
    left: -75px;        /* !!! */
    width:200px;        /* !!! */
}