laroy laroy -4 years ago 40
CSS Question

DIV Drawing Duplication And Priority

I have a jsfiddle I'm working on

here
: https://jsfiddle.net/laroy/f9dhrrgg/

as you can see, there is a 3D column type image that I've created. I would like to duplicate this, and move the duplication to the right and on top of the original, such that they are overlapping. I've tried figuring it out but haven't been able to, so any help would be appreciated.

The code is as follows:



.ultra {
position: relative;
height: 200px;
width: 200px;
overflow: hidden;
background-color: white;
z-index: 1;
}

.sub_ultra {
position: absolute;
bottom: 0;
height: 100px;
width: 200px;
overflow: hidden;
background-color: grey;
margin-top: 5em;
z-index: 1;
}

.right_side {
height: 390px;
width: 177px;
overflow: hidden;
background-color: yellow;
margin-left: 10em;
margin-top: -7em;
position: absolute;
-webkit-transform: rotate(-45deg);
-moz-transform: rotate(-45deg);
transform: rotate(-45deg);
z-index: -1;
}

.bottom_side {
height: 380px;
width: 142px;
overflow: hidden;
background-color: red;
margin-left: 7.1em;
margin-top: -6.8em;
position: absolute;
-webkit-transform: rotate(-45deg);
-moz-transform: rotate(-45deg);
transform: rotate(-45deg);
z-index: -1;
}

<div class="ultra">
<div class="sub_ultra"></div>
</div>

<div class="right_side"></div>
<div class="bottom_side"></div>




Answer Source

This can be easily accomplished by wrapping your image in a relatively positioned container and using jQuery clone to create another copy.

jQuery Fiddle

No jQuery Fiddle

HTML

<div class="container">
  <div class="image-wrap">
    <div class="ultra">
      <div class="sub_ultra"></div>
    </div>

    <div class="right_side"></div>
    <div class="bottom_side"></div>
  </div>
</div>

jQuery

$(".image-wrap").clone().appendTo(".container").addClass("shifted")

Js (No jQuery)

var node = document.querySelector(".image-wrap").cloneNode(true);
node.className = node.className + " shifted";
document.querySelector(".container").appendChild(node);

New Css

.container {
  position: relative;
  margin-top: 20px;
  display: inline-block;
}
.shifted {
  position: absolute;
  top: -20px;
  right: -20px;
}
Recommended from our users: Dynamic Network Monitoring from WhatsUp Gold from IPSwitch. Free Download