CSS旋轉元素並將元素放置在另一個元素的角上

Question

現在，我的安排如下：

我希望這些樹適合正方形的上角（每棵樹在對角頂點處，就像形成一個外部正方形）

我的HTML：

  <div class="outer-wrapper">

    <div class="inner-wrapper">
      <div class="box {{box.color}}" ng-repeat="box in boxes" ng-class="{'lit': box.isLit}" ng-click="boxClick(box.id)">
      </div>
    </div>

    <div class="image" ng-repeat="image in images" ng-if="showImages" ng-click="boxClick(image.id)">
      <img src="{{image.path}}">
    </div>

  </div>

我的CSS：

.image img{

    height: 50px;
    width: 100px;
    margin-top: 45px;
    float: right;   
}

.inner-wrapper {  
  width: 200px;
}

.outer-wrapper {
    width: 250px;
}

.box {
    height: 50px;
    width: 50px;
    border: 1px solid black;
    margin: 10px;
    float: left;    
}

我該如何實現？ 如果我沒有以適當的方式使用div，或者可以更有效地使用它們來實現相同的目的，那將是很好的。

Answer 1

您可以給框指定相對位置，然后將包含圖像的div放在其中並為其指定絕對位置，然后可以相對於框定位圖像。

如果要在每個角上都有圖像，則應在每個角上添加一個div，然后可以使用nth-child()將不同的CSS規則應用於每個角。

如果要旋轉圖像，只需使用transform:rotate();

這樣的事情將為您工作：

的HTML

    <div class="inner-wrapper">
          <div class="box " >
           <div class="image" >
           <img src="your_image.jpg">
           <img src="your_image.jpg">
           <img src="your_image.jpg">
           <img src="your_image.jpg">
           </div>
         </div>
        </div>

的CSS

.box{
  position:relative;
}   

.image{
position:absolute;
}

.image:nth-child(1) {
  top:-15px;
  left:-5px;
  transform: rotate(45deg);
}

.box .image:nth-child(2) {
  top:-15px;
  right:-5px;
  transform: rotate(-45deg);
}

.box .image:nth-child(3) {
  bottom:-15px;
  left:-5px;
  transform: rotate(135deg);
}

.box .image:nth-child(4){
  bottom:-15px;
  right:-5px;
  transform: rotate(-135deg);
}

這是一個工作的小提琴：

https://jsfiddle.net/e06mjvpf/7/