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。然後你可以使用不同的css規則來使用nth-child()。

如果要旋轉圖像只使用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/