Float 2 divs side-by-side with triangular tip

Question

Float 2 divs side-by-side with triangular tip

Navigation

#1 by (2 votes)

4

This is being difficult, and I will explain why, I have two divs as in the print below, the site is responsive, they must float side by side, however, these divs have triangular tips, and they must scale horizontally until a given breakpoint that I determine in the case the div of the red color on small screens xs: 320px would have 100% width and the second I would hide. but on large lg: 1200px screens, they would have to stay the way it is in print, but I do not want it to break if the monitor is a little smaller than 1200.

I've tried it in some ways here but the dark block always breaks.

I would like suggestions.

Look at the code I made: link

html css

asked by anonymous 01.09.2015 / 19:33

1 answer

Insert MySQL PDO Nested pointers and references

score 2 · Accepted Answer

I'll post as an answer but I do not know if I want the white block to be hidden or to the right of the red block so anything you tell me below that I edit the answer

<style>
    body {
  padding: 0;
  margin: 0;
  background: #242424;
}

.container {
  max-width: 980px;
  margin: 0 auto;
}

.banner {
  background: url(http://www.citygop.org/wp-content/uploads/2015/02/city-wallpaper-7.jpg) no-repeat 0 50%;
  height: 400px;
  position: relative;
}

.banner-header {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
}

.banner-title {
  display: inline-block;
  height: 55px;
  background: #F64444;
  font-family: arial, sans-serif;
  font-size: 15px;
  color: #fff;
  text-transform: uppercase;
  text-align: right;
  padding: 15px 15px;
  box-sizing: border-box;
  position: relative;
}

.banner-title:before {
  content: '';
  display: block;
  height: 100%;
  width: 500%; /* i hate it */
  position: absolute;
  top: 0;
  left: -500%;
  background: #f64444;
}

.banner-title:after {
  content: '';
  display: block;
  height: 0;
  width: 0;
  border-width: 55px 60px 0 0;
  border-style: solid;
  border-color: #f64444 transparent;
  position: absolute;
  top: 0;
  right: -60px;
}



.banner-title02:before {
    border-color: white transparent;
    border-style: solid;
    border-width: 0 0 55px 60px;
    content: "";
    display: block;
    height: 0;
    position: absolute;
    right: 129px;
    top: 0;
    width: 0;
}
.banner-title02 {
  color: black;
  display: inline-block;
  height: 55px;
  background: white;
  font-family: arial, sans-serif;
  font-size: 15px;  
  text-transform: uppercase;
  text-align: right;
  padding: 15px 15px;
  box-sizing: border-box;
  position: relative;
  right: -57px;
}
.banner-title02:after {
  content: '';
  display: block;
  height: 0;
  width: 0;
  border-width: 55px 60px 0 0;
  border-style: solid;
  border-color: white transparent;
  position: absolute;
  top: 0;
  right: -60px;
}



.banner-title03::before {
    border-color: #5e3633 transparent;
    border-style: solid;
    border-width: 0 0 114px 120px;
    content: "";
    display: block;
    height: 0;
    position: absolute;
    right: 603px;
    top: -9px;
    width: 4px;
}
.banner-title03 {
    background: #5e3633 none repeat scroll 0 0;
    box-sizing: border-box;
    color: white;
    display: inline-block;
    font-family: arial,sans-serif;
    font-size: 11px;
    height: 105px;
    padding: 15px;
    position: relative;
    right: -112px;
    text-align: left;
    text-transform: uppercase;
    top: -4px;
    width: 63%;
}


@media screen and (max-width: 980px) {
  .banner-title, .container { width: 100%; }  
  .banner-title:before, .banner-title:after { display: none; }
  .banner-title02:before, .banner-title02, .banner-title02:after { display: none; }
  .banner-title03:before, .banner-title03 { display: none; }
}
</style>
<div class="banner">
  <div class="banner-header">
    <div class="container">
        <div class="banner-title">products</div>        
        <div class="banner-title02">Linha Racing</div>
        <div class="banner-title03">Terceiro bloco Coloque seu texto aqui</div>
    </div>
      
  </div>
</div>

Here on the site it does not open the desired size so I forked your codepen and did other

Edit: I updated codepen