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>

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/

解决方法

您可以通过包装器(.inner-wrapper)包装所有.drow元素,然后旋转( DRY),将 transform-origin设置为左上角,从元素的左上角旋转,最后将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();
});

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,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>

css – 带有文本的网页上的对角图像

解决方法

猜你在找的CSS相关文章