* {
-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>
。我可以通过调整右侧的绝对定位（目前为0）来使它与之对齐，但当父div的高度发生变化时（由于在右侧添加/删除更多文本），数值会混乱。我看到了一些关于90度旋转的jQuery解决方案，但没有一个适用于我的6度旋转。
top: -120px;就可以看到变化。 - Hardik Bharadava