网页上带有文字的对角线图片

Question

以下是我试图实现的效果：

当用户将鼠标移动到图片上时，应该以对角线方式覆盖一行文本在图片上。

这些图片可以作为<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/

- codeNinja

---

你想要旋转而不是扭曲。 - sn3ll

Answer 1

你可以将所有的 .drow 元素用一个包装器（.inner-wrapper）包裹起来，然后旋转它（DRY），将 transform-origin 设置为 top left 以从元素的左上角旋转，最后给 .inner-wrapper 添加 translateX(-50%) 以使其在其父容器中居中。

要拉伸 .drow，您可以给 .inner-wrapper 添加 width:200%。

要计算 .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>

- Alex

---

这确实很好地旋转了。有没有办法确保高度和宽度始终填满窗口（100%）？我需要确保即使在旋转后，行也能够拉伸以占据整个宽度。使用一些JS会更容易吗？ - codeNinja

@codeNinja 你可以为 .drow 设置一个安全的宽度（.inner-wrapper），例如 width: 200%;，但对于 .drow 的高度，你需要使用 js。请查看已编辑的答案。 - Alex

Answer 2

$("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>

您可以使用transform:rotate进行旋转。

-webkit-transform: rotate(-30deg);
-moz-transform: rotate(-30deg);
-ms-transform: rotate(-30deg);
-o-transform: rotate(-30deg);
transform: rotate(-30deg);

W3C作为参考：https://www.w3schools.com/cssref/playit.asp?filename=playcss_transform_rotate

尝试创建一个div并将您的图像设置为背景-img，然后旋转此div。

在此div内，将您的文本放入p中，并使用jQuery在悬停时显示它。

在Codepen上查看：http://codepen.io/Qasph/pen/PmoNVz

- Julien

---

你分享的链接可能会帮助找到所询问问题的答案，但你应该尽量在回答中包含一个最小工作代码示例。请记住，链接往往会更改和失效。 - Mike

@JulienW 不要那样使用 setInterval，那会让浏览器不必要地一遍又一遍地运行代码。可以使用 $("div").hover(function(){ $('p').css('display', 'block'); }, function(){ $('p').css('display', 'none'); });。 - K Scandrett

Answer 3

你觉得使用rotate更好吗？我认为这可能是你的答案:

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

- Kuba Wojtach

---

尝试使用此示例制作我在问题中指示的网格。 https://jsfiddle.net/ufwmuuv4/ - codeNinja

Answer 4

你可以通过纯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>

- Renzo Calla

Answer 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);
}

- Kiran Dash

---

我根据你们提供的帮助更新了我的问题。 - codeNinja

Answer 6

好的，所以只能使用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%;
}

- codeNinja