[SOLUCIONADO] figura sencilla con CSS responsive

[helacer]

Buenas.

Tengo una web en la que necesito generar una imagen como la siguiente. Quiero generarla a punta de css.

Estuve generandola con CSS a punta de bordes pero estos bordes me piden medida en Pixeles no me permiten porcentajes... la idea es no tener problemas de resolucion...como la puedo generar con CSS? gracias

[ArturoGallegos]

algo como esto puede valerte

Código HTML:

<div class="figura"></div>
 

Código CSS:

.figura{
  height:25px;
  background:#000;
  margin: 30px 0;
  overflow:hidden;
  position: relative;
}
 
  .figura:before, .figura:after{
    display: block;
    content: '';
    height: 50px;
    width: 60%;
    background:#fe0;
    transform:rotate(3deg);
    position:absolute;
    bottom: -35px;
    left: -15px;
  }
  .figura:after{
    left: auto;
    right: -15px;
    transform:rotate(-3deg)
  }
 

[helacer]

gracias Arturo. Es exactamente lo que necesitaba, voy a estudiar su código, gracias!