响应式布局中的角带

Question

JSFiddle

我正在尝试为响应式布局制作一个角落功能区。

我使用以下内容来定位它：

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

我已经安装了功能区，当用户调整屏幕大小时会出现我的问题，如何始终获得它以便功能区位于角落？我试过以不同的百分比偏移量玩耍，但它碰碰运气。

Answer 1

不要使用width：100％作为色带

小提琴

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