CSS для поворота и позиционирования элементов в углах другого элемента

0

Прямо сейчас у меня есть такая возможность:

Изображение 174551

Я хочу, чтобы эти деревья соответствовали верхним углам квадратов (каждое дерево в диагональных вершинах, например, образуя внешний квадрат)

Мой 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;    
}

Как я могу это достичь? Если я не использую divs надлежащим образом, или если они могут быть использованы более эффективным способом для достижения того же, было бы здорово.

Теги:

1 ответ

2
Лучший ответ

Вы можете дать полем относительное положение. И положите 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/

Поделиться
  • 0
    С абсолютным положением изображения я могу видеть только одно дерево
  • 0
    конечно ... если вам нужно больше деревьев, просто добавьте больше div в него, и если вы хотите, чтобы каждый в каждый угол просто давал каждому класс, например ".top-left {top: 0, left: 0;}".
Показать ещё 4 комментария

Ещё вопросы

Сообщество Overcoder
Наверх
Меню