在另一個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; 到.heading div，但在許多其他情況/屏幕尺寸下該hack都.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;
}