好的,所以只能使用JavaScript和jQuery来实现。没有CSS的方法可以做到这一点。
js
<script type="text/javascript">
$(window).on('resize', function ());
function toRadians (angle)
function updateWidth());
var firstRowBotPoint = diagonalHeight+zeroRowBotPoint;
console.log('firstRowBotPoint:' + firstRowBotPoint);
var firstRowWidth = calcMaxWidthNeeded(firstRowBotPoint, contentWidth, commonDivHeight);
$("#drow1").width(firstRowWidth);
var row1padding = getLeftPadding(contentHeight, firstRowBotPoint, diagonalHeight, commonDivHeight);
$("#drow1").css();
var secondRowBotPoint = diagonalHeight+firstRowBotPoint;
console.log('secondRowBotPoint:' + secondRowBotPoint);
var secondRowWidth = calcMaxWidthNeeded(secondRowBotPoint, contentWidth, commonDivHeight);
$("#drow2").width(secondRowWidth);
var row2padding = getLeftPadding(contentHeight, secondRowBotPoint, diagonalHeight, commonDivHeight);
$("#drow2").css();
var thirdRowBotPoint = diagonalHeight+secondRowBotPoint;
console.log('thirdRowBotPoint:' + thirdRowBotPoint);
var thirdRowWidth = calcMaxWidthNeeded(thirdRowBotPoint, contentWidth, commonDivHeight);
$("#drow3").width(thirdRowWidth);
var row3padding = getLeftPadding(contentHeight, thirdRowBotPoint, diagonalHeight, commonDivHeight);
$("#drow3").css();
var forthRowBotPoint = diagonalHeight+thirdRowBotPoint;
console.log('forthRowBotPoint:' + forthRowBotPoint);
var row4padding = getLeftPadding(contentHeight, forthRowBotPoint, diagonalHeight, commonDivHeight);
var forthRowWidth = calcMaxWidthNeeded(forthRowBotPoint, contentWidth, commonDivHeight)- row4padding;
$("#drow4").width(forthRowWidth);
var topCorrection4 = row4padding*Math.tan(toRadians(20));
console.log('topCorrection4:' + topCorrection4);
$("#drow4").css();
var fifthRowBotPoint = diagonalHeight+forthRowBotPoint;
console.log('fifthRowBotPoint:' + fifthRowBotPoint);
var row5padding = getLeftPadding(contentHeight, fifthRowBotPoint, diagonalHeight, commonDivHeight);
var fifthRowWidth = calcMaxWidthNeeded(fifthRowBotPoint, contentWidth, commonDivHeight)- row5padding;
var topCorrection5 = row5padding*Math.tan(toRadians(20));
$("#drow5").width(fifthRowWidth);
$("#drow5").css();
/*correct the padding
var row0padding = 0;
var row1padding = getLeftPadding(contentHeight, firstRowBotPoint, diagonalHeight, commonDivHeight);
var row2padding = getLeftPadding(contentHeight, secondRowBotPoint, diagonalHeight, commonDivHeight);
var row3padding = getLeftPadding(contentHeight, thirdRowBotPoint, diagonalHeight, commonDivHeight);
var row4padding = getLeftPadding(contentHeight, forthRowBotPoint, diagonalHeight, commonDivHeight);
var row5padding = getLeftPadding(contentHeight, fifthRowBotPoint, diagonalHeight, commonDivHeight);
var topPadding = (commonDivHeight-32)/2;
$("#rowp1").css();
$("#rowp2").css();
$("#rowp3").css();
$("#rowp4").css();
$("#rowp5").css();
$("#rowp6").css();
$("#content").css();
}
function calcMaxWidthNeeded (bottomLoc, contentWidth, height)
var x = xDistance - contentWidth;
var bigHyp = xDistance/Math.cos(toRadians(20));
var ratio = x/xDistance;
var smallHyp = bigHyp*ratio;
var extraWidth = height*Math.tan(toRadians(20));
var efficientWidth = bigHyp-smallHyp+extraWidth;
console.log('efficientWidth:' + efficientWidth);
return efficientWidth;
}
function getLeftPadding(contentHeight, bottomLoc, diagonalHeight, height)
var bottHyp = y/Math.sin(toRadians(20));
var xtoyRatio = x/y;
var topHyp = bottHyp*xtoyRatio;
var extraWidth = height*Math.tan(toRadians(20));
console.log('extraWidth:' + extraWidth);
var paddingVal = topHyp ;
console.log('paddingVal:' + paddingVal);
return paddingVal;
}
function myFunction()
</script>
HTML
<div class="content" id="content">
<div class="drow0" id="drow0"></div>
<div class="drow1" id="drow1"><p id="rowp1">DEVICES, IN A REALLY HUMAN WAY.</p></div>
<div class="drow2" id="drow2">
<div class="drow2-1" id="drow2-1"><p id="rowp2">EAT, DRINK AND BE MARY.</p></div>
<div class="drow2-2"><p id="rowp3">BE CAUSE.</p></div>
</div>
<div class="drow3" id="drow3">
<div class="drow3-1"><p id="rowp4">HEY, NICE PACKAGE.</p></div>
<div class="drow3-2"><p id="rowp5">WAIT FOR APPLAUSE.</p></div>
</div>
<div class="drow4" id="drow4"><p id="rowp6">WE FEEL BETTER ALREADY.</p></div>
<div class="drow5" id="drow5"></div>
</div>
CSS
.p, .drow1, .drow2, .drow3,.drow4{
margin: 0;
}
.content {
overflow: show;
position:relative;
text-align: center;
background-color: black;
color: white;
font-family: 'futura-pt-bold', sans-serif;
font-style: normal;
font-weight: 700;
font-size: 2em;
text-shadow:0px 0px 16px black;
opacity: 0;
}
.drow0, .drow1, .drow2, .drow3, .drow4, .drow5{
position:absolute;
transform: rotate(-20deg);
transform-origin: bottom left;
height:16.66%;
left:0%;
width: 100%;
background-repeat:no-repeat;
background-size:cover;
}
.drow0{
top:0%;
background-image: url("../desktop_images/1.jpg");
}
.drow1{
top:16.66%;
background-image: url("../desktop_images/2.jpg");
}
.drow2{
display: inline-flex;
top:33.33%;
}
.drow2-1{
width: 60%;
background-image: url("../desktop_images/3.jpg");
background-repeat:no-repeat;
background-size:cover;
}
.drow2-2{
width: 40%;
background-image: url("../desktop_images/4.jpg");
background-repeat:no-repeat;
background-size:cover;
}
.drow3{
display: inline-flex;
top:50%;
}
.drow3-1{
width: 45%;
background-image: url("../desktop_images/5.jpg");
background-repeat:no-repeat;
background-size:cover;
}
.drow3-2{
width: 55%;
background-image: url("../desktop_images/6.jpg");
background-repeat:no-repeat;
background-size:cover;
}
.drow4{
background-image: url("../desktop_images/7.jpg");
top:66.66%;
}
.drow5{
background-image: url("../desktop_images/8.jpg");
top:83.33%;
}
.drow1:hover {
background-repeat: no-repeat;
background-position: center;
color: transparent;
text-shadow:0px 0px 0px transparent;
background-image: url("../desktop_images/bg-2.png");
background-size: auto 65%;
}
.drow2-1:hover {
background-repeat: no-repeat;
background-position: center;
color: transparent;
text-shadow:0px 0px 0px transparent;
background-image: url("../desktop_images/bg-3.png");
background-size: 52% auto;
}
.drow2-2:hover {
background-repeat: no-repeat;
background-position: center;
color: transparent;
text-shadow:0px 0px 0px transparent;
background-image: url("../desktop_images/bg-4.png");
background-size: 75% auto;
}
.drow3-1:hover {
background-repeat: no-repeat;
background-position: center;
color: transparent;
text-shadow:0px 0px 0px transparent;
background-image: url("../desktop_images/bg-5.png");
background-size: auto 65%;
}
.drow3-2:hover {
background-repeat: no-repeat;
background-position: center;
color: transparent;
text-shadow:0px 0px 0px transparent;
background-image: url("../desktop_images/bg-6.png");
background-size: auto 65%;
}
.drow4:hover {
background-repeat: no-repeat;
background-position: center;
color: transparent;
text-shadow:0px 0px 0px transparent;
background-image: url("../desktop_images/bg-7.png");
background-size: auto 65%;
}