响应式布局中的角功能区

Question

JSFiddle

我试图为响应式布局制作角功能区。

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

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

我已将功能区固定到位，当用户调整屏幕大小时出现问题，如何始终获取它以使功能区位于角落？ 我尝试过使用不同的百分比偏移量，但它被击中了。

Answer 1

不要

将宽度：100%用于功能区

小提琴

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