Question

到目前为止，这是我的code：

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

父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的右上角，如下所示：

enter image description here

我可以通过调整右边的绝对定位（当前为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>

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

您只需将旋转参考更改为（ transform-origin：left top; ）并将所有形状向右移动到宽度值。在您的情况下正确：-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;
}

希望它能为你做到：）

绝对定位旋转div的角落

5 个答案: