html - CSS旋转和定位元素在另一个元素的 Angular 落

Question

现在我有如下安排:

我希望这些树适合正方形的上 Angular (每棵树都在对 Angular 线顶点，就像形成一个外部正方形)

我的 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 放入其中并给它们绝对位置。这样您就可以相对于盒子定位图像。

如果你想在每个 Angular 落都有一个图像，你应该为每个 Angular 落添加一个 div。然后你可以使用 nth-child() 对每个 Angular 落应用不同的 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);
}

这是一个有效的 fiddle :

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