Есть ли способ изменить угол наклона CSS?

Question

Так что это немного странный вопрос. Программирование веб-приложения с изменяемым размером div. На данный момент я использую свойство изменения размера CSS, поскольку казалось, что это самый простой способ сделать это. Проблема заключается в том, что у моего ящика есть заблокированное нижнее и левое положение (которое я хочу сохранить), но выбранный по умолчанию угол изменения - это нижний правый, который дает странные результаты для изменения размера верхней части. Посмотрел онлайн, но не смог найти способ переместить этот угол в верхний правый, а не правый правый. Любые советы о том, как произвести этот результат? Также не против использования другого способа изменения размера. Вот текущий стиль применяется к коробке:

display: block; 
font-size: 9pt; 
position: absolute; 
bottom: 50px; 
left: 20px; 
padding: 10px; 
min-height: 0; 
min-width: 0; 
border: solid 1px black; 
width:400px; 
height:400px; 
resize: both; 
overflow-x: auto; 
overflow-y: hidden; 

А вот картина DIV в вопросе с угла, который в настоящее время имеет инструмент для изменения размера на нем в штучной упаковке. Любые советы будут очень признательны. Я более чем рад рассказать о вещах, которые я, возможно, пропустил. Благодаря!

Box I want to resize in question

Answer 1

Вот одна отправная точка. Я по существу создал пользовательский значок размера в правом верхнем углу. Затем я использовал события «mousedown», «mousemove» и «mouseup» для отслеживания активности изменения размера. Возможно, вы сможете сделать что-то подобное, используя «перетаскивание» и связанные с ним события.

Обратите внимание, что «mousedown» находится на значке изменения размера, в то время как «mousemove» и «mouseup» находятся на корпусе документа (или какой-либо другой более крупный элемент позади изменяемого размера div).

Для упрощения я строго кодировал ширину и высоту в JavaScript. Это означает, что эти ценности существуют в двух разных местах, что не очень хорошо. Вероятно, вы должны поместить их только в JavaScript или только в CSS, а не в оба, как я сделал.

Мне нужно было поместить изменяемый размер div в контейнер, который заполнил тело. В противном случае события «mousemove» вне resizable div не были зарегистрированы. Это может и не быть проблемой, если у вас уже есть другой контент «позади» вашего абсолютно позиционируемого изменяемого размера элемента.

Для информации: Я также изначально попытался использовать встроенные функции изменения размера. Я использовал transform: rotate(-90deg), чтобы переместить угол изменения размера в верхний правый, затем вставьте внутренний div с transform: rotate(90deg), чтобы сделать внутреннее содержимое правой кнопкой вверх. Однако, в то время как это заставило угол изменения размера в правильном месте, само изменение было полностью перепутано, так как движения мыши и фактическое изменение размера были на 90 градусов. Это немного сложно описать словами, но достаточно сказать, что без какой-либо серьезной переработанной работы (или, возможно, с помощью какого-то блестящего кода или скрытой функции) я не мог заставить эту стратегию работать.

var 
 
    doc = document, 
 
    ht = 400, 
 
    wd = 400, 
 
    main = document.querySelector("#resizable"), 
 
    x, y, dx, dy; 
 

 
var startResize = function(evt) { 
 
    x = evt.screenX; 
 
    y = evt.screenY; 
 
}; 
 

 
var resize = function(evt) { 
 
    dx = evt.screenX - x; 
 
    dy = evt.screenY - y; 
 
    x = evt.screenX; 
 
    y = evt.screenY; 
 
    wd += dx; 
 
    ht -= dy; 
 
    main.style.width = wd + "px"; 
 
    main.style.height = ht + "px"; 
 
}; 
 

 
rsz.addEventListener("mousedown", function(evt) { 
 
    startResize(evt); 
 
    doc.body.addEventListener("mousemove", resize); 
 
    doc.body.addEventListener("mouseup", function() { 
 
    doc.body.removeEventListener("mousemove", resize); 
 
    }); 
 
});

#container { 
 
    position: absolute; 
 
    border: solid red 1px; 
 
    margin: 0; 
 
    height: 100%; 
 
    width: 100%; 
 
} 
 
#resizable { 
 
    display: block; 
 
    font-size: 9pt; 
 
    position: absolute; 
 
    bottom: 50px; 
 
    left: 20px; 
 
    padding: 10px; 
 
    min-height: 0; 
 
    min-width: 0; 
 
    border: solid 1px black; 
 
    width: 400px; 
 
    height: 400px; 
 
    overflow-x: auto; 
 
    overflow-y: hidden; 
 
} 
 
#rsz { 
 
    position: absolute; 
 
    right: 0; 
 
    top: 0; 
 
    width: 20px; 
 
    height: 20px; 
 
    background-color: rgba(255, 0, 0, 0.5); 
 
} 
 
#original {}

<div id="container"> 
 
    <div id="resizable"> 
 
    <div id="rsz"></div> 
 
    (some content) 
 
    </div> 
 
</div>

Если запустить этот фрагмент кода из в Stack Overflow, вам необходимо расширить бегущую область просмотра, нажав на «Полной странице» после нажатия кнопки «Выполнить фрагмент кода».