Question

我正在尝试在另一个div的底部创建对角线div。它应该如下所示：http://storage8.static.itmages.com/i/17/0706/h_1499339517_4995911_421bf6ae42.png。

当我向边框左侧添加100vw值时出现问题，因为水平滚动条出现在我的网站上。我也试过用Jquery来找到身体的宽度。它可以工作，但是当我调整浏览器大小时，边框宽度不会改变。任何建议如何解决？

＆＃13;

     var actualInnerWidth = $(".background-gradient").prop("clientWidth"); 
$('.background-gradient').css({
   'border-top':'50px solid red',
   'border-left': actualInnerWidth + 'px solid transparent'
});

＆＃13;

    .banner {
   min-height: 50vh;
   margin: 0;
   padding:0;
   background-color: red;
 }
.background-gradient {
   width:100%;
   height:50px;
   background-color:yellow;
 }

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
<div class="jumbotron banner">
</div>
<div class="background-gradient">
</div>

＆＃13;

这是jsfiddle：https://jsfiddle.net/b49mmm9a/1/

Answer 1

试试这个我觉得你找到了这个

.box {
  background-color: skyblue;
  margin-top: 40px;
  padding: 1% 20px;
  /* Added a percentage value for top/bottom 
            padding to keep 
            the wrapper inside of the parent */
  -webkit-transform: skewY(-5deg);
  -moz-transform: skewY(-5deg);
  -ms-transform: skewY(-5deg);
  -o-transform: skewY(-5deg);
  transform: skewY(-5deg);
}

.box>.wrapper {
  -webkit-transform: skewY(5deg);
  -moz-transform: skewY(5deg);
  -ms-transform: skewY(5deg);
  -o-transform: skewY(5deg);
  transform: skewY(5deg);
}

<div class="box">
  <div class="wrapper">
    <h1>This is a heading</h1>
    <p>This is a sub-heading</p>
    <p>

      How do I draw a Diagonal div?
      </a>
    </p>
  </div>
</div>

http://jsbin.com/daruruhola/edit?html,css,js,output

Answer 2

这是简单的JS / jQuery代码。

function setBorder(){
      var actualInnerWidth = $(".background-gradient").prop("clientWidth"); 
      $('.background-gradient').css({
        'border-top':'50px solid red',
        'border-left': actualInnerWidth + 'px solid transparent'
            }); 
        }

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

      $(window).resize( function(){
        setBorder();
      });

在此处检查codepen https://codepen.io/sajiddesigner/pen/PjBRxQ

Answer 3

＆＃13;

.kontainer {
  width: 100%;
  overflow: hidden;
}

＆＃13;

<div class="kontainer">
  <div class="banner"></div>
	<div class="background-gradient"></div>
</div>

＆＃13;

创建100％宽度的形状div的问题

3 个答案: