Effect of pie div

Question

Effect of pie div

Navigation

#1 by (3 votes)
#2 by (1 votes)

0

Well, I have a% d of% that has box2-1 at 100%. I want to create a% div of% that has width in 100%, but that maintain the background with two colors, to have an effect of a pie div. Can anyone help me?

Follow the code. The problem is that I am not able to put the div box2-2 with width to 100%.

.box2-1 {
    width: 100%;
    height: 500px;
    background-color: #FF895B;
}
.box2-2 {
    border-right-width: 899px;
    border-right-style: solid;
    border-right-color: rgb(255, 137, 91);
    bottom: -60px;
    border-bottom: 60px solid transparent;
}

<div class="box2-1">
            
        </div>
        <div class="box2-2"></div>

Example of the div I want to create:

html css

asked by anonymous 20.04.2017 / 15:52

2 answers

Div overlap the other Upload alternate image in case of not having the correct image

score 3 · Answer 1

That's the idea: You get width of div 2-1 and apply to the edge of div 2-2. even if the user resizes the screen, you will not lose the effect because it is linked to window.resize tb.

I do not know if this is the best way to do it, but it works.

function adjustBorder(){
  var div1Width = $('.box2-1').width();
  $('.box2-2').css('border-right-width', div1Width+ 'px');
}

window.onresize = function(event) {
  adjustBorder();
}

adjustBorder();

.box2-1 {
    width: 100%;
    height: 500px;
    background-color: #FF895B;
}
.box2-2 {
    border-right-width: 899px;
    border-right-style: solid;
    border-right-color: rgb(255, 137, 91);
    bottom: -60px;
    border-bottom: 60px solid transparent;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script><divclass="box2-1">
            
</div>
<div class="box2-2"></div>

score 1 · Answer 2

The best way I found it was like this:

.box2 {
  background-color: #FF895B;
  position: relative;
  height: 500px;
}
.box2:after {
  background: inherit;
  bottom: 0;
  content: '';
  display: block;
  height: 50%;
  left: 0;
  position: absolute;
  right: 0;
  transform: skewY(1.5deg);
  transform-origin: 0%;
}

<!-- Box 2 -->
        <div class="box2">
            
        </div>

Source: link