CODEWITHSUNDEEP
javascriptjqueryhtmlcss
mati
mati

Reputation: 97

Issue with creating shaped div at 100% width

I am trying to create diagonal div, at the bottom of another div. It should look like this: http://storage8.static.itmages.com/i/17/0706/h_1499339517_4995911_421bf6ae42.png.

I have problem when I adding 100vw value to my border-left, because horizontal scrollbar appears on my website. I also tried use Jquery to find the width of the body. It works but when I resize my browser, border width does not change. Any suggestions how to fix it? 

     var actualInnerWidth = $(".background-gradient").prop("clientWidth"); 
$('.background-gradient').css({
   'border-top':'50px solid red',
   'border-left': actualInnerWidth + 'px solid transparent'
}); 
    .banner {
   min-height: 50vh;
   margin: 0;
   padding:0;
   background-color: red;
 }
.background-gradient {
   width:100%;
   height:50px;
   background-color:yellow;
 }
<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>

Here is jsfiddle: https://jsfiddle.net/b49mmm9a/1/

Upvotes: 0

Views: 62

Answers (3)

user5044606
user5044606

Reputation: 

.kontainer {
  width: 100%;
  overflow: hidden;
}
<div class="kontainer">
  <div class="banner"></div>
	<div class="background-gradient"></div>
</div>

Upvotes: 0

Karan Mehta
Karan Mehta

Reputation: 415

Try This i think you find this

.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

Upvotes: 1

Sajid Manzoor
Sajid Manzoor

Reputation: 1428

Here is simple JS/jQuery Code. 

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

check codepen here https://codepen.io/sajiddesigner/pen/PjBRxQ

Upvotes: 0

Related Questions