Question

所以我试图在45度旋转2个div，但我需要它们在中间相遇。

我已经尝试了所有我能想到的东西让这些div在窗口中间相遇，但只是可以让它工作。

这是一个解释目标的JSfiddle。 http://jsfiddle.net/wnuxtc5c/

P.S。这些必须是2个单独的元素，所以我可以单独为它们制作动画。

这是我到目前为止所做的：

<div id="container">
        <div class="greenBG"></div>
        <div class="blueBG"></div>
</div>


#container {
    position: absolute;
    z-index: 1;
    width: 100%;
    height: 100%;
    overflow: hidden;
}

.greenBG {
    background: green;
    position: absolute;
    -ms-transform: rotate(45deg); 
    -webkit-transform: rotate(45deg); 
    transform: rotate(45deg);
}

.blueBG {
    background: blue;
    position: absolute;
    -ms-transform: rotate(45deg); 
    -webkit-transform: rotate(45deg); 
    transform: rotate(45deg);
}



$(document).ready(function() {
    var wH = $(window).height(),
        wW = $(window).width(),
        offset = wW/2, 
        diagonal = Math.sqrt(wH*wH + wW*wW),
        diagonalMid = diagonal/2;

        console.log('wH',wH);
        console.log('wW',wW);
        console.log('diagonal',diagonal);
        console.log('diagonalMid',diagonalMid);
        console.log('offset',offset);

    $('.greenBG').css({
        height: wW + 'px',
        width: wW + 'px',
        left: '-'+offset+'px',
        top: '-'+offset+'px'
    });
    $('.blueBG').css({
        height: wW + 'px',
        width: wW + 'px',
        right: '-'+offset+'px',
        bottom: '-'+offset+'px'
    });


});

Answer 1

请查看此链接

＆＃13;

.top {
   
    top      : 6px;
    left     : 10px;
    width    : 0;
    height   : 0;
    z-index  : 100;
    
    border-left   : 60px solid transparent;
    border-right  : 60px solid transparent;
    border-bottom : 60px solid black;
}
.bottom {
    position : absolute;
    width    : 0;
    height   : 0;
    z-index  : 99;
    
    border-left   : 60px solid transparent;
    border-right  : 60px solid transparent;
    border-top : 60px solid red;
}

＆＃13;

<div class="top"></div>
<div class="bottom"></div>

＆＃13;

Answer 2

您可以使用倾斜

来转换div

#container {
  width: 80%;
  height: 300px;
  border: solid black 1px;
  position: relative;
  overflow: hidden;
  }

.greenBG {
  width: 100%;
  height: 100%;
  top: 0px;
  right: 50%;
  position: absolute;
  border: solid 1px green;
  transform: skewX(-45deg);
  overflow: hidden;
}

.blueBG {
  width: 100%;
  height: 100%;
  top: 0px;
  left: 50%;
  position: absolute;
  border: solid 1px blue;
  transform: skewX(-45deg);
  overflow: hidden;
}

.innerGreen {
  position: absolute;
  top: 0px;
  right: 0px;
  width: 100%;
  height: 100%;
  transform: skewX(45deg);
  transform-origin: top right;
  background: linear-gradient(white, green);
  }

.innerBlue {
  position: absolute;
  top: 0px;
  left: 0px;
  width: 100%;
  height: 100%;
  transform: skewX(45deg);
  transform-origin: bottom left;
  background: linear-gradient(white, blue);
  }

<div id="container">
  <div class="greenBG">
      <div class="innerGreen"></div>
  </div>
  <div class="blueBG">
      <div class="innerBlue"></div>
  </div>
</div>

JS / CSS旋转DIVS可以在任何屏幕中间进行会面

2 个答案: