Диагональные изображения на веб-странице с текстом

Вот эффект, который я пытался достичь: введите описание изображения здесь

Когда пользователь перемещает мышь над изображением, линия текста должна накладывать изображение по диагонали.

Изображения могут быть фоном для <p>. На самом деле просто нужна помощь, прежде всего, с полной диагональю. Не хотите использовать жестко закодированные размеры/позиции, которые не будут работать на экранах различной ширины/высоты.

<div class="testrows">  
  <div class="drow"><p>Hello World</p></div>
  <div class="drow"><p>Hello World</p></div>
  <div class="drowhalf">
    <p>Hello World</p><p>Hello World</p>
  </div>
  <div class="drowhalf">
    <p>Hello World</p><p>Hello World</p>
  </div>
  <div class="drow"><p>Hello World</p></div>
  <div class="drow"><p>Hello World</p></div>
</div>

CSS

body {
  background: #e5e5e5;
  height:100%;
}

.testrows{
  display:block;
  height:100%;
}

.drow {
  width: 100%;
  height: 10%;
  background: black;
  position: absolute;
  top: -50px;
  left: 0;
  -ms-transform: rotate(45deg);
  -webkit-transform: rotate(45deg);
  transform: rotate(45deg);
  text-align: center;
  color: #fff;
  vertical-align: middle;
}

.drow p {
  ms-transform: rotate(-90deg);
  -webkit-transform: rotate(-90deg);
  transform: rotate(-90deg);
  padding-right: 60px;
  width: 100%;
  padding-bottom: 55px;
}

.drowhalf {
  width: 100%;
  height: 10%;
  background: black;
  position: absolute;
  top: -50px;
  left: 0;
  -ms-transform: rotate(45deg);
  -webkit-transform: rotate(45deg);
  transform: rotate(45deg);
  text-align: center;
  color: #fff;
  vertical-align: middle;
}

.drowhalf p {
  ms-transform: rotate(-90deg);
  -webkit-transform: rotate(-90deg);
  transform: rotate(-90deg);
  padding-right: 60px;
  width: 50%;
  padding-bottom: 55px;
}

https://jsfiddle.net/ufwmuuv4/

ОТВЕТЫ

Ответ 1

Хорошо, так что это было возможно только с Javascript и jquery. Для этого не было способа CSS.

JS

        <script type="text/javascript">
        $(window).on('resize', function (){
            updateWidth();
        });

        function toRadians (angle) {
          return angle * (Math.PI / 180);
        }

        function updateWidth(){
            //add this to the width to make sure it fits
            var idealRatio = 45.0/114;
            idealHeight = 134.0;
            var safetyAdd = 10;
            //var topMargin = .;
            var divHeightPercent = 1/6.4;

            //first get the new content container height and width
            var contentHeight = $('#content').height();
            console.log('height:' + contentHeight);
            var contentWidth = $('#content').width();
            console.log('width:' + contentWidth);

            //scale the hieght in proportion to the diagonal
            /*
            var proportion = Math.sqrt(contentHeight*contentHeight+ contentWidth*contentWidth)/(contentHeight/Math.cos(toRadians(20)));
            console.log('proportion:' + proportion);
            var theta = Math.atan(contentWidth/contentHeight);
            var degree = 180*theta/Math.PI;
            console.log('degree:' + degree);*/

            //calculate the correction factor for height
            var correctionFactor= (contentHeight*1.0/Math.cos(toRadians(20)))/contentHeight;
            correctionFactor= (idealRatio/(contentHeight/contentWidth));
            correctionFactor= 1+correctionFactor;
            console.log('correctionFactor:' + correctionFactor);
            divHeightPercent = divHeightPercent*correctionFactor;
            console.log('divHeightPercent:' + divHeightPercent);
            //topMargin=topMargin*correctionFactor;
            //console.log('topMargin:' + topMargin);

            //calculate the height of each section
            var commonDivHeight = contentHeight*divHeightPercent;
            console.log('divHeight:' + commonDivHeight);
            $("#drow0").height(commonDivHeight);
            $("#drow1").height(commonDivHeight);
            $("#drow2").height(commonDivHeight);
            $("#drow3").height(commonDivHeight);
            $("#drow4").height(commonDivHeight);
            $("#drow5").height(commonDivHeight);



            //correctio for common div height
            var cdhCorr = Math.tan(toRadians(20))*commonDivHeight;
            cdhCorr = Math.sin(toRadians(20))*cdhCorr;
            console.log('cdhCorr:' + cdhCorr);
            var diagonalHeight = commonDivHeight/Math.cos(toRadians(20));
            console.log('diagonalHeight:' + diagonalHeight);

            //calculate the bottom for the first div and proper width
            var zeroRowBotPoint = diagonalHeight;
            console.log('zeroRowBotPoint:' + zeroRowBotPoint);
            //var zeroRowWidth = zeroRowBotPoint/Math.sin(toRadians(20));//apply some correction faction here
            //console.log('zeroRowWidth:' + firstRowWidth);
            var zeroRowWidth = calcMaxWidthNeeded(zeroRowBotPoint, contentWidth, commonDivHeight);
            $("#drow0").width(zeroRowWidth);
            $("#drow0").css({top: 0});

            //calculate the bottom for the first div and proper width
            var firstRowBotPoint = diagonalHeight+zeroRowBotPoint;
            console.log('firstRowBotPoint:' + firstRowBotPoint);
            //var firstRowWidth = firstRowBotPoint/Math.sin(toRadians(20));//apply some correction faction here
            //console.log('firstRowWidth:' + firstRowWidth);
            var firstRowWidth = calcMaxWidthNeeded(firstRowBotPoint, contentWidth, commonDivHeight);
            $("#drow1").width(firstRowWidth);
            var row1padding = getLeftPadding(contentHeight, firstRowBotPoint, diagonalHeight, commonDivHeight);
            $("#drow1").css({top: zeroRowBotPoint, paddingLeft: row1padding, marginRight:700});

            //calculate the bottom for the second div and proper width
            var secondRowBotPoint = diagonalHeight+firstRowBotPoint;
            console.log('secondRowBotPoint:' + secondRowBotPoint);
            //var secondRowWidth = secondRowBotPoint/Math.sin(toRadians(20));//apply some correction faction here
            //console.log('secondRowWidth:' + secondRowWidth);
            var secondRowWidth = calcMaxWidthNeeded(secondRowBotPoint, contentWidth, commonDivHeight);
            $("#drow2").width(secondRowWidth);
            var row2padding = getLeftPadding(contentHeight, secondRowBotPoint, diagonalHeight, commonDivHeight);
            $("#drow2").css({top: firstRowBotPoint, paddingLeft: row2padding});

            //calculate the bottom for the third div and proper width
            var thirdRowBotPoint = diagonalHeight+secondRowBotPoint;
            console.log('thirdRowBotPoint:' + thirdRowBotPoint);
            //var thirdRowWidth = thirdRowBotPoint/Math.sin(toRadians(20));//apply some correction faction here
            //console.log('thirdRowWidth:' + thirdRowWidth);
            var thirdRowWidth = calcMaxWidthNeeded(thirdRowBotPoint, contentWidth, commonDivHeight);
            $("#drow3").width(thirdRowWidth);
            var row3padding = getLeftPadding(contentHeight, thirdRowBotPoint, diagonalHeight, commonDivHeight);
            $("#drow3").css({top: secondRowBotPoint, paddingLeft: row3padding});

            //calculate the bottom for the forth div and proper width
            var forthRowBotPoint = diagonalHeight+thirdRowBotPoint;
            console.log('forthRowBotPoint:' + forthRowBotPoint);
            //var forthRowWidth = forthRowBotPoint/Math.sin(toRadians(20));//apply some correction faction here
            //console.log('forthRowWidth:' + forthRowWidth);
            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({top: thirdRowBotPoint-topCorrection4, left: row4padding});

            //calculate the bottom for the fith div and proper width
            var fifthRowBotPoint = diagonalHeight+forthRowBotPoint;
            console.log('fifthRowBotPoint:' + fifthRowBotPoint);
            //var fifthRowWidth = fifthRowBotPoint/Math.sin(toRadians(20)) - row5padding;//apply some correction faction here
            //console.log('fifthRowWidth:' + fifthRowWidth);
            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({top: forthRowBotPoint-topCorrection5, left: row5padding});

            /*correct the padding
            //var y = contentHeight;
            var row0padding = 0; //its not possible
            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);
            //*/

             //get font height
            var topPadding = (commonDivHeight-32)/2;
            $("#rowp1").css({marginTop: topPadding, marginLeft:-250});
            $("#rowp2").css({marginTop: topPadding});
            $("#rowp3").css({marginTop: topPadding});
            $("#rowp4").css({marginTop: topPadding});
            $("#rowp5").css({marginTop: topPadding});
            $("#rowp6").css({marginTop: topPadding, marginLeft:250});

            //finall unhide the contents
            $("#content").css({opacity:1});
        }

        function calcMaxWidthNeeded (bottomLoc, contentWidth, height){
            //first find the width of the triangle formed by the section
            var xDistance = bottomLoc/Math.tan(toRadians(20));

            if(xDistance <= contentWidth){
                //the width calculated by the simple function will be most efficient
                console.log('Using simple Width Calculation');
                return bottomLoc/Math.sin(toRadians(20));
            }

            var x = xDistance - contentWidth;
            var bigHyp = xDistance/Math.cos(toRadians(20));
            var ratio = x/xDistance;

            var smallHyp = bigHyp*ratio;

            //get the extra width due to the 20 degree rotaion
            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 y = bottomLoc - contentHeight;
            var x = y-diagonalHeight;

            //return if there is no need to change the padding
            if(x<=0){
                console.log('Left padding change not required');
                return 0;
            }

            var bottHyp =  y/Math.sin(toRadians(20));
            var xtoyRatio = x/y;
            var topHyp = bottHyp*xtoyRatio;

            //get the extra width due to the 20 degree rotaion
            var extraWidth = height*Math.tan(toRadians(20));
            console.log('extraWidth:' + extraWidth);

            //finally calculate the padding
            var paddingVal = topHyp ;

            console.log('paddingVal:' + paddingVal);
            return paddingVal;
        }

        function myFunction() {
            document.querySelector('#selected').style.color='#008ed2';

            updateWidth();
        }
    </script>

HTML

<div class="content" id="content">
        <!--div class="inner-wrapper"-->
            <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-->
    </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%;
}

Ответ 2

Вы можете обернуть все элементы .drow оболочкой (.inner-wrapper), а затем повернуть ее (DRY), установить transform-origin до top left, чтобы повернуть от top left элемента и, наконец, дать translateX(-50%) to .inner-wrapper, чтобы центрировать его в своем родителе.

Для растяжения .drow вы можете дать width:200% .inner-wrapper.

Чтобы вычислить высоту .drow, вы должны использовать js.

Jsfiddle

function stretch(){
	var $wrapper = $('.wrapper'),
  		diagonal = Math.ceil(Math.sqrt(Math.pow($wrapper.width(),2) + Math.pow($wrapper.height(),2))),
      height = diagonal / $wrapper.find('.inner-wrapper .drow').length;        
      $wrapper.find('.inner-wrapper .drow').height(height).css('line-height', height + 'px'); 
}

$(document).ready(function(){
	stretch();
});


$( window ).resize(function(){
	stretch();
});
 html,
 body {
   margin: 0;
   padding: 0;
 }
 
 html,
 body,
 .wrapper,
 .inner-wrapper {
   height: 100%;
 }
 
 body {
   background: #e5e5e5;
 }
 
 p {
   margin: 0;
 }
 
 .wrapper {
   overflow: hidden;
 }
 
 .inner-wrapper {
   transform: rotate(-45deg) translateX(-50%);
   transform-origin: top left;
   text-align: center;
   width: 200%;
 }
 
 .drow {
   height: 100px;
   line-height: 100px;
   color: #fff;
   background: rgba(0, 0, 0, 1);
 }
 
 .drowhalf p {
   display: inline-block;
   width: 50%;
 }
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="wrapper">
  <div class="inner-wrapper">
    <div class="drow">
      <p>Hello World</p>
    </div>
    <div class="drow">
      <p>Hello World</p>
    </div>
    <div class="drow drowhalf">
      <p>Hello World</p><p>Hello World</p>
    </div>
    <div class="drow drowhalf">
      <p>Hello World</p><p>Hello World</p>
    </div>
    <div class="drow">
      <p>Hello World</p>
    </div>
    <div class="drow">
      <p>Hello World</p>
    </div>
  </div>
</div>

Ответ 3

$("div").hover(function () {
    $('p').css('display', 'block');
}, function () {
    $('p').css('display', 'none');
});
div {
  -webkit-transform: rotate(-30deg);
  -moz-transform: rotate(-30deg);
  -ms-transform: rotate(-30deg);
  -o-transform: rotate(-30deg);
  transform: rotate(-30deg);
  margin: 100px;
  height: 150px;
  width: 350px;
  background-image: url('http://placehold.it/350x150');
}

p {display:none}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.10.0/jquery.min.js"></script>
<div>  
  <p>Hello World</p>
</div>

Ответ 4

Не было бы лучше использовать поворот? Я думаю, что это может быть ваш ответ:

CSS

body {
  background: #e5e5e5;
}

.aviso {
  width: 50px;
  height: 200px;
  background: black;
  position: absolute;
  top: -50px;
  left: 0;
  -ms-transform: rotate(45deg);
  -webkit-transform: rotate(45deg);
  transform: rotate(45deg);
  text-align: center;
  color: #fff;
  vertical-align: middle;
}

.aviso p {
  ms-transform: rotate(-90deg);
  -webkit-transform: rotate(-90deg);
  transform: rotate(-90deg);
  padding-right: 60px;
  width: 100%;
  padding-bottom: 55px;
}

HTML:

<div class="aviso">
  <p>WIP</p>
</div>

http://codepen.io/AyrtonAlves/pen/NxMBxO

Ответ 5

Используйте rotate вместо skew.

.div {
    width: 200px;
    height: 200px;  
    -webkit-transform: rotate(45deg);
       -moz-transform: rotate(45deg);
        -ms-transform: rotate(45deg);
         -o-transform: rotate(45deg);
            transform: rotate(45deg);
}

Ответ 6

Вы можете добиться этого эффекта с помощью чистого css..

div {
  
  margin: 100px;
  height: 150px;
  width: 350px;
  background-image: url('http://placehold.it/350x150');
}
div:hover p{
  display:block;
}

p {
display:none;
-webkit-transform: rotate(-30deg);
  -moz-transform: rotate(-30deg);
  -ms-transform: rotate(-30deg);
  -o-transform: rotate(-30deg);
  transform: rotate(-30deg);
  }
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.10.0/jquery.min.js"></script>
<div>  
  <p>Hello World</p>
</div>