Pie div effect

Asked

Viewed 755 times

0

Well I have a div box2-1 who has the width 100%. I want to create a div box2-2 that has the width 100%, but keep the background with two colors, to have a pie div effect. Someone can help me?

Follow the code. The problem is that I’m not able to put the div box2-2 with width in 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: inserir a descrição da imagem aqui

html css

  • You want to do something like gradient?

  • Hugo, would you be so kind as to sketch out what this pie div would look like, it could be in Paint anyway, just to get a better idea of how to help you...

  • if you put 605px it gets right here... but it will not work on your site probably ...

  • @Marconi that’s what I’m looking for.

  • @Hugoborges, you don’t need two Ivs to make one gradient...

  • can be done with jQuery.. taking the width of div 1 and setting for the property of div 2 no resize

  • @Mathias I want to do a div like this: http://i.imgur.com/Awjtga5.png But with:100%

Show 2 more comments

2 answers

3

This is the idea: You get the width 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 as it is linked to window.resize tb.

I don’t know if it’s 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>
<div class="box2-1">
            
</div>
<div class="box2-2"></div>

  • 1

    +1 "I don’t know if it’s the best way to do" kkk, but the idea is good!

  • 1

    Well it worked, but I don’t know if that’s the best way. I think in CSS’s to solve. + 1, if no one posts a better solution I mark as solved ok.

1

The best way I could find was 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: https://www.viget.com/articles/angled-edges-with-css-masks-and-transforms

  • poutz man ... sent well ... I was trying something with skew but I didn’t get to try skew-y... +1

Browser other questions tagged html css

You are not signed in. Login or sign up in order to post.