Div triangular with CSS3

I have used backgrund-imagem because it has a better browser support, it works from IE9, but you could also do it with transform:skew (it does not work in IE or Edge) , clip-path (a lot of code for a little thing), and even with SVG would have to do, but preferred with linear-gradiente same

My solution is to use pseudo-elements transform and after and tilting it with before . See how it goes 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>

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

Here's 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's happening with div and how the property works.

The border-left-width and border-right-width are the same, only the side that defines the size changes. Here is 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>

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

Note: The support for the triangle made with CSS is practically global, since we use well-known tags that are supported in almost all browsers, up to IE, from version 4 onwards.

I will also leave an answer in my own question about another solution that 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>

Result: JSFiddle