Абсолютно позиционирование угла повернутого DIV

Question

Вот мой code до сих пор:

У меня есть родительский DIV и другой DIV внутри него, который поворачивается на 6 градусов.

CSS-для родительского DIV является:

#side-left { 
    background: #f5f5f5; 
    overflow: hidden; 
    position: absolute; 
    top: 0; 
    left: 0; 
    width: 50%; 
    height: 100%; 
} 

И повернутый треугольник:

.solid-triangle { 
    background: #c9dee2; 
    border-left: 3px solid black; 
    position: absolute; 
    height: 110%; 
    width: 145px; 
    top: -10px; 
    right: 0; 
    -webkit-transform: rotate(6deg); 
    -moz-transform: rotate(6deg); 
    transform: rotate(6deg); 
    transform-origin: left bottom; 
} 

В принципе, я хочу, чтобы верхняя часть черной окантовкой, чтобы быть в верхнем правом углу диалогового окна родительский DIV, например:

я могу получить его литий ne вверх, отрегулировав абсолютное позиционирование справа (в настоящее время 0), но значения перепутаются, когда высота родительского div изменяется (из-за добавления большего/меньшего текста в правой части).

Я видел несколько решений jQuery для поворотов на 90 градусов, но ни один из них не работал с моим 6-градусным вращением.

Answer 1

Я сортировал это для вас.

Ваше происхождение трансформации было перевернутым, и вы хотели верхний правый, а не нижний левый.

и изменение слева от 0px к -145px

---

https://jsfiddle.net/nkqsnmwm/3/

* { 
 
    -webkit-box-sizing: border-box; 
 
    -moz-box-sizing: border-box; 
 
    box-sizing: border-box; 
 
} 
 
#main-wrap { 
 
    clear: both; 
 
    overflow: hidden; 
 
    position: relative; 
 
} 
 
#side-right { 
 
    width: 50%; 
 
    float: right; 
 
    padding-left: 20px; 
 
} 
 
#side-left { 
 
    background: #f5f5f5; 
 
    overflow: hidden; 
 
    position: absolute; 
 
    top: 0; 
 
    left: 0; 
 
    width: 50%; 
 
    height: 100%; 
 
} 
 
.solid-triangle { 
 
    background: #c9dee2; 
 
    border-left: 3px solid black; 
 
    position: absolute; 
 
    height: 110%; 
 
    width: 145px; 
 
    top: -10px; 
 
    right: -145px; 
 
    -webkit-transform: rotate(6deg); 
 
    -moz-transform: rotate(6deg); 
 
    transform: rotate(6deg); 
 
    transform-origin: top right; 
 
}

<div id="main-wrap"> 
 
    <div id="side-left"> 
 
    <div class="solid-triangle"></div> 
 
    </div> 
 

 
    <div id="side-right"> 
 
    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam tristique tincidunt magna, vitae iaculis erat. Sed vel risus dolor. Sed dictum convallis luctus. Nulla ac odio placerat, molestie ante maximus, malesuada ipsum. Proin pharetra imperdiet 
 
     metus ut vestibulum. Phasellus pharetra, tellus sit amet viverra ultrices, sapien tellus lobortis nisi, nec placerat nisl purus nec lacus. Sed neque risus, fringilla ac elit ac, placerat porttitor nisl. Donec nec facilisis nulla, in iaculis justo. 
 
     Fusce in mi eros. Sed semper felis rhoncus, sodales purus sed, semper massa. Morbi laoreet, purus non dignissim aliquet, ante nulla malesuada ligula, dignissim finibus nulla tortor vel ex. Nullam quis efficitur libero. Sed pellentesque sodales lacinia. 
 
     Donec vitae faucibus purus, sed luctus lacus.Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam tristique tincidunt magna, vitae iaculis erat. Sed vel risus dolor. Sed dictum convallis luctus. Nulla ac odio placerat, molestie ante maximus, 
 
     malesuada ipsum. Proin pharetra imperdiet metus ut vestibulum. Phasellus pharetra, tellus sit amet viverra ultrices, sapien tellus lobortis nisi, nec placerat nisl purus nec lacus. Sed neque risus, fringilla ac elit ac, placerat porttitor nisl. 
 
     Donec nec facilisis nulla, in iaculis justo. Fusce in mi eros. Sed semper felis rhoncus, sodales purus sed, semper massa. Morbi laoreet, purus non dignissim aliquet, ante nulla malesuada ligula, dignissim finibus nulla tortor vel ex. Nullam quis 
 
     efficitur libero. Sed pellentesque sodales lacinia. Donec vitae faucibus purus, sed luctus lacus.</p> 
 

 
    <p>Aliquam lacinia sagittis dolor, a consequat felis blandit in. Praesent at orci mi. Nunc imperdiet semper rhoncus. In lectus ipsum, scelerisque vel nulla nec, auctor bibendum lectus. Pellentesque dictum purus diam, et vulputate eros varius vel. Nunc 
 
     tempor nisi a tellus ornare feugiat. Sed dignissim, turpis sed mollis fermentum, purus eros vestibulum nulla, at viverra neque dui sit amet metus. Donec euismod libero luctus diam imperdiet, a vulputate arcu malesuada. Proin tincidunt aliquam dui, 
 
     nec efficitur nisi laoreet ac. Proin faucibus, purus eget aliquet pretium, est ex dapibus massa, ut malesuada lectus dolor sit amet ante. Morbi volutpat enim vel ex tempor imperdiet. Phasellus pretium felis non libero accumsan, sed ultricies nulla 
 
     iaculis.</p> 
 

 
    <p>Morbi ac sagittis nunc. Aliquam erat volutpat. Ut nulla ante, efficitur eu tincidunt a, vestibulum sit amet urna. Vestibulum tristique aliquam lacus vitae consectetur. Mauris euismod velit sit amet orci commodo, in consectetur urna rutrum. Duis ut 
 
     turpis ac lacus accumsan tincidunt vitae eget tortor. Curabitur lacinia nibh mattis lacinia varius. Quisque posuere felis eget mollis sagittis. Vestibulum lacinia volutpat leo ac dignissim. Pellentesque sodales metus at massa malesuada vulputate. 
 
     Sed vehicula magna ut sapien sodales suscipit. Praesent dictum convallis diam, sed faucibus felis rutrum quis. Morbi convallis rutrum dui et varius. Vestibulum dapibus imperdiet dolor, at sollicitudin risus accumsan in.</p> 
 
    </div> 
 
</div>

Answer 2

Изменения к классу твердого треугольника, как этот

.solid-triangle { 
    background: #c9dee2; 
    border-left: 3px solid black; 
    position: absolute; 
    height: 100%; 
    width: 95px; 
    top: -10px; 
    right: 0; 
    -webkit-transform: rotate(6deg); 
    -moz-transform: rotate(6deg); 
    transform: rotate(6deg); 
    transform-origin: left bottom; 
} 

Answer 3

Изменить его к этому, и он будет работать правильно:

.solid-triangle { 
    background: #c9dee2; 
    border-left: 3px solid black; 
    position: absolute; 
    height: 110%; 
    width: 145px; 
    top: -120px; 
    right: 0; 
    -webkit-transform: rotate(6deg); 
    -moz-transform: rotate(6deg); 
    transform: rotate(6deg); 
    transform-origin: left bottom; 
} 

Answer 4

Наименьший способ достижения .. просто добавить position: inherit;

#side-right { 
width: 50%; 
    float: right; 
    padding-left: 20px; 
    margin-right: 1px; 
    position: inherit; 
} 

Answer 5

Вы можете просто изменить ссылку вращательное (преобразование происхождения : левый верх;) и переместите всю форму вправо на значение -width. В вашем случае справа: -145px;

Итак:

.solid-triangle { 
    background: #c9dee2; 
    border-left: 3px solid black; 
    position: absolute; 
    height: 110%; 
    width: 145px; 
    top: -10px; 
    right: -145; 
    -webkit-transform: rotate(6deg); 
    -moz-transform: rotate(6deg); 
    transform: rotate(6deg); 
    transform-origin: left top; 
} 

Надеется, что это будет делать для вас :)