I want to position a css triangle as a background

Question

I want to build the following layout:

Preferable i want only use css for that. But even with an background-image i wouldn\'t know how to build it. I searche

Answer 1

Try this one, but still need some work on the responsive part.

.box{
  position: relative;
  width: 100%;
  max-width: 600px;
  background: #ccc;
  min-height: 300px;
}
.box:before {
  width: 0; 
  height: 0;
  content: "";
  position: absolute;
  z-index: 0;
  top: 0;
  left: 0;
  border-left: 300px solid transparent;
  border-right: 300px solid transparent;
  border-top: 180px solid #555;
}

.box .content{
  z-index: 10;
  position: relative;
  color: #fff;
  text-align: center;
  padding-top: 40px;
}

h1, h2{
  margin: 0;
  padding: 0;
}
h2{
  margin-bottom: 80px;
}

.btn{
  background: #f00;
  color: #fff;
  display: inline-block;
  padding: 5px 10px;
  text-align: center;
  text-decoration: none;
  min-width: 200px;
  font-size: 20px;
}

  

  
Headline
  
Headline
    
    CTA