Blogger header con linea o curva en la parte de abajo css y html

blogger fondo de header con titulo y subtitulo. Header con flecha en la parte de abajo con css y html.

Pueden agregar el codigo css al Header existente, o crean un nuevo div. 

codigo css: Va antes de: ]]></b:skin> en plantilla.

/* banner o header mio */

.headermio {

  padding: 20px;

  text-align: center;

  background: linear-gradient( #ffde66, #ffb600);

  color: black;

  font-size: 18px;

clip-path: polygon(0 0, 100% 0, 100% 84%, 64% 84%, 50% 100%, 36% 84%, 0 84%);

}

Nota: color: black; pueden cambiarlo por color:#ffffff; y etc.

 Codigo html o div:

<!--Header mio -->
  <div class='headermio'>
  <h3>Header</h3>
  <p>My supercool header</p>
</div>

(para cambiar color a titulo h3, agregan: style="color:#ffffff;" dentro de <h3> quedaria asi: <h3 style="color:Navy;">titulo</h3>)

Codigo css para mostrar nuevo header o div solo en pagina de inicio:

codigo css: Va antes de: ]]></b:skin> en plantilla.

body:not(.home) .headermio {

display: none

}