html - 响应式布局中的角功能区

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;        /* !!! */
}