在另一个div下对齐旋转的div

Question

我正在尝试将一个旋转的div对准另一个div的右下边缘。这是我要实现的目标：

这是我到目前为止所得到的：https://codepen.io/jayceekay/pen/pGVBYL?editors=1100

<div class="container">
  <div class="image"></div>
  <div class="heading">
    Some heading
  </div>
</div>

CSS：

.container {
  display: flex;
  flex-flow: row wrap;
  border: 3px dashed black;
  width: 200px;
}

.image {
  background-color: tomato;
  height: 100px;
  width: 100%;
}

.heading {
  background-color: skyblue;
  transform: rotate(90deg);
  height: 100px;
  width: 100%;
}

我研究了类似的问题，但所有解决方案都是定制的，因此我找不到能够在任何显示器上使用的真正动态解决方案。为了获得上图所示示例的示例，我在margin-left: 100px; div中添加了.heading，但在许多其他情况/屏幕尺寸下，这种破解也无法实现。

Answer 1

为简单起见，我想将内容与演示文稿分开。需要一些调整才能得出蓝色框周围的空白。

.container {
  display: flex;
  flex-flow: row wrap;
  justify-content: flex-end;
  border: 3px dashed black;
  width: 200px;
}

.image-box {
  background-color: tomato;
  height: 100px;
  width: 100%;
}

.heading {
  background-color: skyblue;
  transform: rotate(90deg);
  height: 100px;
  width: 100%;
}

<div class="container">
  <div class="image-box"></div>
  
  <div class="heading-box">
    <div class="heading">
      Some heading
    </div>
  </div>
</div>

Answer 2

如果必须保留DOM结构，则可以进行以下操作。

.container {
  display: flex;
  flex-flow: row wrap;
  border: 3px dashed black;
  width: 200px;
}

.image {
  background-color: tomato;
  height: 100px;
  width: 100%;
}

.heading {
  background-color: skyblue;
  transform-origin: right bottom;
  transform: rotate(90deg);
  height: 100px;
  width: 100px;
}

<div class="container">
  <div class="image"></div>
  <div class="heading">
    Some heading
  </div>
</div>

Answer 3

您要做的是使用transform-origin定义旋转的锚定位置：

.heading {
  background-color: skyblue;
  transform: rotate(90deg) translateY(-100px);
  transform-origin: top left;
  height: 100px;
  width: 100%;
}

https://codepen.io/anon/pen/zeaLgz?editors=1100

Answer 4

我找到了一种聪明的解决方案。我删除了flexbox b / c是没有必要的-但如果您是不喜欢浮动元素的人之一，我敢肯定您可以将其重新添加。您必须将环绕.heading-box旋转180度。然后，您可以将标题从其左上角原点旋转-90deg：

https://codepen.io/anon/pen/XOYPNz?editors=1100

.container::after {
  content: ' ';
  display: block;
  clear: both;
}

.image {
  background-color: tomato;
  height: 100px;
  width: 100%;
}

.heading-box {
  transform: rotate(180deg);
}

.heading {
  float: left;
  background-color: skyblue;
  transform: rotate(-90deg);
  transform-origin: top left;
  height: 100px;
}