CSS маска объектов

242

16 апреля 2017, 00:37

Доброго утра! Каким образом из верхнего блока с такой разметкой:

.header{
width: 100%;
height: 100px;
background: #eeeeee;
border-bottom-width: 1px;
border-bottom-style: solid;
border-bottom-color: #afafaf;
}

Сделать вот такой вот блок:

Если можно какую нибудь интересную статью по этой теме, буду очень признателен.

Сейчас это выглядит так:

Answer 1

Например вот так:

.header{ 
  position: relative; 
  width: 100%; 
  height: 100px; 
  background: #eeeeee; 
  border-bottom-width: 1px; 
  border-bottom-style: solid; 
  border-bottom-color: #afafaf; 
} 
.header:before{ 
  content:""; 
  position: absolute; 
  width: 100px; 
  height: 50px; 
  margin: -1px auto 0; 
  top: 100%; 
  left: 0; 
  right: 0; 
  background: #eeeeee; 
  border: 1px solid #afafaf; 
  border-top: none; 
}