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

This should get you close, and illustrates a CSS only approach:

* {
  margin: 0;
  padding: 0
}

body {
  background: #ccc;
  min-height: 500px;
}

div {
  width: 0;
  height: 0;
  margin: 0px auto;
  border: 200px solid transparent;
  border-top-color: grey;
}

a {
  display: block;
  background: blue;
  color: white;
  padding: 5px 10px;
  width: 200px;
  margin: 0px auto;
  position: relative;
  top: -200px;
  text-align: center;
  text-decoration: none;
}

link