Triangular div with CSS3

Question

I’m trying to create a triangular div effect to stay below a normal div as in the image below..

The problem is I’m not getting the values of border-left: and border-right: dynamically to fit into the div.

Any idea how to do?

Follows the code:

.normal{
  height:100px;
  background-color:#f00;
}
.triangulo {
  width: 0; 
  height: 0; 
  border-left: 50px solid transparent; 
  border-right: 50px solid transparent;
  border-top: 20px solid #f00;
}

<div class="normal"></div>
<div class="triangulo"></div>

Answer 1

One of the solutions to solve this is using skewY(), the problem of doing as you are doing is that you won’t be able to do the background move from one element to the other maintaining continuity image understands. In your case you would have to have one backgrund-imagem in each element and hardly they would be aligned.

OBS: I used transform:skew pq it has a better browser support, works from IE9, but vc tb could do this with clip-path (does not work in IE or Edge), SVG (too much code for too little), and even with linear-gradiente I could do it, but I preferred with transform even

My solution is using pseudo-elements after and before and tilting him with skew. See how it looks in the example

html, body {
  width: 100%;
  height: 100%;
  margin: 0;
  padding: 0;
}
.efeito {
  position: relative;
  height: 200px;
  background-image: url(https://unsplash.it/420/200);
  background-size: cover;
  color: #f00;
}
.efeito::before, .efeito::after {
  content: "";
  position: absolute;
  background-color: #fff;
  bottom: 0;
  height: 5vw;
  width: 50%;
}
.efeito::before {
  left: 0;
  transform: skewY(5deg);
  transform-origin: bottom left;
}
.efeito::after {
  right: 0;
  transform: skewY(-5deg);
  transform-origin: bottom right;
}

<div class="efeito">
  Lorem ipsum dolor, sit amet consectetur adipisicing elit. Sed voluptate dignissimos odit quod velit, natus vero ut ratione libero nulla!
</div>

Answer 2

Come on, for that you can use the properties border-left-width and border-right-width.

See a similar example you want:

.triangle {
  width: 0;
  height: 0;
  border: 0 solid transparent;
  border-left-width: 230px;
  border-right-width: 242px;
  border-top: 39px solid black;
}

<div class="triangle"></div>

Now we need to understand what is happening to div and how the property works.

The border-left-width and border-right-width are equal, only changes the side you set the size. See a small example of how they work:

.show-example {
  /* Auxiliar */
  background-color: black;
  width: 20rem;
  height: 5rem;
  border: 0 solid #dc143c;
  /* O que interessa */
  border-right-width: 2em;
  border-left-width: 2em;
}

<div class="show-example"></div>

The properties set the value of the side width, and work in partnership with the border-top, defining the height of the div. Also remember that the values of the lateral width should be proportional, the height is relative to the size of your triangle.

Note: support for the triangle made with CSS is practically global, since we use well-known tags that have support in virtually all browsers, even in IE, version 4 onwards.

Answer 3

I will also leave an answer in my own question about another solution I found in SCSS.

Follows:

SCSS:

html, body {
  width: 100%;
  height: 100%;
  margin: 0;
  padding: 0;
}
.efeito {
  background: #f00;
  width: 100%;
  position: absolute;  

  &:after {
    content: '';
    position: absolute;
    top: 100%;
    left: 0; 
    right: 0;
    padding-bottom: 10%;
    background: #f00;
    clip-path: polygon(0% 0%, 100% 0%, 50% 50%);
  }
}

HTML:

<div class="efeito">
   Teste
</div>

Upshot: Jsfiddle