那些遇到过的问题

在网页上的对角图像与文本

cod*_*nja 15 css

这是我试图实现的效果: 在此输入图像描述

当用户将鼠标移动到图像上时,一行文本应以对角线方式覆盖图像.

图像可能是背景<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>
Run Code Online (Sandbox Code Playgroud)

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;
}
Run Code Online (Sandbox Code Playgroud)

https://jsfiddle.net/ufwmuuv4/

Ale*_*lex 8

你可以用所有.drow的包装(元素.inner-wrapper),然后将其旋转(DRY),设置transform-origin于top left从旋转的top left元素,最后给translateX(-50%)到.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();
});
Run Code Online (Sandbox Code Playgroud) 
 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%;
 }
Run Code Online (Sandbox Code Playgroud) 
<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>
Run Code Online (Sandbox Code Playgroud)

cod*_*nja -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>
Run Code Online (Sandbox Code Playgroud)

超文本标记语言

<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>
Run Code Online (Sandbox Code Playgroud)

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%;
}
Run Code Online (Sandbox Code Playgroud)

归档时间：

查看次数：

890 次

最近记录：

8 年，10 月 前
相关归档
用徽标图像替换H1文本:SEO和可访问性的最佳方法？ 232
div上的CSS3滚动条样式 33
display:block inside display:inline 30
iOS浏览器 - 使用JavaScript更改css或内容时,iFrame跳转到顶部 29
在小屏幕上Bootstrap 3"btn-group"无响应行为 26
css两个背景图像 21
在表tr td中使用nth-child 19
css布局在同一行上固定宽度和可变宽度 18
我的CSS没有通过我的内容脚本注入 17
图标字体与图像 16
难疑归档
什么是"大O"符号的简单英语解释？ 4851
如何确定数组是否包含Java中的特定值？ 2194
什么是 ":-!!" 用C代码？ 1627
喜欢构成而不是继承？ 1538
如何在python字符串中打印文字大括号字符并在其上使用.format？ 1320
JavaScript中是否有"null coalescing"运算符？ 1305
"javascript:void(0)"是什么意思？ 1292
从字典中删除元素 1243
如何在Bash中将字符串转换为小写？ 1158
Visual Studio中的构建解决方案,重建解决方案和清洁解决方案之间的区别？ 1081