javascript - 绝对定位旋转 div 的 Angular

Question

这是我的 code到目前为止:

我有一个父 div 和另一个旋转 6 度的 div。

父 div 的 CSS 是:

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

和旋转的三 Angular 形:

.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 度旋转。

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>