Duda HTML CSS

[clmartin]

Querria saber como se hace el siguiente piquito (foto en link de abajo) que tiene el background de la dropdown <ul>. Espero puedan ayudarme! Saludos!

https://drive.google.com/file/d/0B35wl2jWx03ibTJSYUtoVWtNdnM/view?usp=sharing

[mbm150]

Hola

es abstante sencillo, tienes que hacer el triangulo usando los border (aquí tutorial: https://css-tricks.com/snippets/css/css-triangle/) y eso ponerlo dentro de un :before o un :after para colocarlo en su posición correcta.

Algo así:

Código CSS:

ul{
  position: relative;
  display: block;
  width: 210px;
  padding: 5px;
  box-sizing: border-box;
  border-radius: 3px;
  background-color: #2d4166;
  color: #FFF;
}
ul::before{
  content: '';
  position: absolute;
  display: block;
  width: 0px;
  height: 0px;
  top: -20px;
  left: 25px;
  border: 10px solid;
  border-color: transparent transparent #2d4166 transparent;
}
 

Saludos.