小编Ash*_*ley的帖子

到目前为止,这是我的代码:

我有一个父div和另一个div旋转了6度.

父div的CSS是:

#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的右上角,如下所示:

我可以通过调整右边的绝对定位(当前为0)来排队,但是当父div的高度发生变化时(由于在右侧添加更多/更少的文本),值会变得混乱.

我已经看到了一些用于90度旋转的jQuery解决方案,但它们都没有与我的6度旋转一起工作.