响应式布局中的角落色带

Question

JSFiddle

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

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

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

我有功能区，我的问题发生在用户调整屏幕大小时，我怎么能总是得到它以便角落里的功能区网站？我已经尝试过不同的百分比偏移，但是它很受欢迎。

Answer 1

不要使用宽度：功能区为100％

<强> fiddle

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