CSS перекошенный прямоугольник выходит за пределы контейнера

Question

У меня есть красный контейнер I, перекошенный на 35 градусов, с его началом преобразования устанавливается в нижнее левое. На приведенном ниже изображении показано, что выделение его родительского контейнера означает, что красный ящик не должен погаснуть.

перекоса эффект работает нормально, но не реагирует, когда верхний правый угол перетекает периметр элемента контейнера. Это текущее поведение или красный прямоугольник:

И это поведение, я хочу, чтобы добиться для него. Перекос коробка должна полностью находиться внутри периметра, ограниченного контейнера заполнения, так как это:

идеи?

Этот фрагмент воспроизводит мой случай:

.container { 
 
    padding: 20px; 
 
    outline: 1px solid black; 
 
    display: inline-block; 
 
} 
 

 
.red-box { 
 
    background-color: red; 
 
    color: white; 
 
    padding: 10px; 
 
    margin-bottom: 10px; 
 
    
 
    transform: skew(-35deg); 
 
    transform-origin: bottom left; 
 
} 
 

 
.red-box > div { 
 
    padding: 0 10px; 
 
    transform: skew(35deg); 
 
}

<div class="container"> 
 
    <div class="red-box"> 
 
    <div>PARKS AND GARDENS IN LONDON</div> 
 
    </div> 
 
    <img src="https://www.vivilondra.it/images/vivilondra/images2/regents-park-top.jpg" /> 
 
</div>

Answer 1

Благодаря @neallred я нашел решение, используя правила тригонометрии.

Красная коробка должна установить свою ширину до 100% минус ее высота, умноженная на тангенс степеней, используемых в преобразовании перекоса. Таким образом:

width: 100% - height * tan(35).

В моем фрагменте я хотел использовать меньше литералов, поэтому я заставил текст красной коробки остаться в одной строке, и таким образом я получил точную высоту окна как 1em + vertical_padding и переписал приведенную выше формулу как 100% - (1em + vertical_padding) * 0.700208, заставляя line-height: 1em раньше.

.container { 
 
    padding: 20px; 
 
    outline: 1px solid black; 
 
    display: inline-block; 
 
} 
 
.red-box { 
 
    background-color: red; 
 
    color: white; 
 
    padding: 10px; 
 
    margin-bottom: 10px; 
 
    transform: skew(-35deg); 
 
    transform-origin: bottom left; 
 
    
 
    box-sizing: border-box; 
 
    width: calc(100% - (1em + 20px) * 0.700208); 
 
} 
 
.red-box > div { 
 
    padding: 0 10px; 
 
    transform: skew(35deg); 
 
    
 
    white-space: nowrap; 
 
    text-overflow: ellipses; 
 
    overflow: hidden; 
 
    line-height: 1em; 
 
}

<div class="container"> 
 
    <div class="red-box"> 
 
    <div>PARKS AND GARDENS IN LONDON</div> 
 
    </div> 
 
    <img src="https://www.vivilondra.it/images/vivilondra/images2/regents-park-top.jpg" /> 
 
</div>

Я надеюсь, что может быть помочь кому-либо еще.

Answer 2

Вы можете использовать функцию известково CSS 3. чтобы рассчитать, насколько верхний край смещен, а затем вычесть его с шириной 100%. См. Developer.mozilla.org/en-US/docs/Web/CSS/calc

Вы выяснили размеры? Это проблема тригонометрии. Я думаю, что более высокая сторона - это грех (55 градусов) * высоты оригинальной красной коробки (или h). Это будет 0,819 * ч. Более короткая сторона будет равна cos (55 градусов) * ч, или 0,574 * ч. Вам нужно знать только о более короткой (нижней) стороне, потому что вам нужно укоротить новую коробку. Если h_final = 0,574 * ч, то это было бы:

.red-box { 
    . 
    . 
    . 
    width: calc(100% - h_finalpx) 
}