CSS to rotate and position elements in corners of another element

Question

Right now I have an arrangement like following:

I want those trees to fit at the upper corners of the squares (each tree at diagonal vertices, like forming an outer square)

My 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>

My 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;    
}

How can I achieve this? If I am not using divs in a proper way, or if they can be used in more efficient way to achieve the same thing, it would be great.

Answer 1

You can give the boxes relative position.And put the div containing the image inside it and give them absolute position.So then you can position the images relative to the boxes.

If you want an image to each corner you should add a div for each corner.Then you could apply different css rules to each of them using nth-child() .

If you want to rotate the images just use transform:rotate();

Something like this would work for you:

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);
}

Here is a working fiddle:

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