3 Blockquote Styles

HELLO! Hoy Les Enseñare Tres Estilos Diferentes De Blockquotes:
Los Codigos Los Encontraras Dentro De Cada Blockquotes.

Colocar En Plantilla / Personalizar / Añadir CSS

1er Estilo: "Dialogo"
Edita Lo Marcado, Pero Ten En Cuenta:
#fcc Es el color de la flecha.
left Cambialo por "right" si quieres la flecha a la derecha.

blockquote {
background: #fcc; /* COLOR DE FONDO */
color: #FFFFFF; /* COLORE DEL TEXTO */
padding: 7px;
position: relative;
border-radius: 0px 10px 10px 10px; /* BORDES REDONDEADOS */
border: 1px dashed #ffc; /* BORDE */
}
blockquote:before {
border-color: #fff #fff #fcc #fff; /* COLOR DE LA FLECHA */
border-style: solid;
border-width: 10px;
content: "";
position: absolute;
left: 0;
top: -20px;
}

2er Estilo: "Note"
Edita Lo Marcado, Pero Ten En Cuenta:
#ff9999 Es el color de la flecha.
#fff & #fff Son las lineas blancas que contornean el doblez

blockquote {
background: #ff9999; /* COLOR DE FONDO */
color: #FFFFFF; /* COLOR DE TEXTO */
padding: 7px;
border: 1px dashed #ffc; /* BORDE */
overflow: hidden;
position: relative;
border-radius: 10px 20px 10px 10px; /* BORDES REDONDEADOS */
}
blockquote:before {
box-shadow: 0px 1px 0px #fff, -1px 0px 0px #fff; /* COLOR DE SOMBRA */
border-color: #FFFFFF #FFFFFF #ff9999 #fff; /* COLOR DE LA FLECHA */
border-style: solid;
border-width: 0 16px 16px 0;
content: "";
display: block;
position: absolute;
right: 0;
top: 0;
width: 0;
}

3er Estilo: "Aviso"
Edita Lo Marcado, Pero Ten En Cuenta:
#aa7799 Es el color de la flecha.

blockquote {
background: #aa7789; /* COLOR DE FONDO */
color: #FFFFFF; /* COLOR DE TEXTO */
padding: 7px;
position: relative;
border-radius: 5px 5px 5px 5px; /* BORDES REDONDEADOS */
border: 0px dashed #ffc; /* BORDER */
margin-top: 20px;
}
blockquote:before {
border-color: #fff #fff #aa7799 #fff; /* COLOR DE LA FLECHA */
border-style: solid;
border-width: 10px;
content: "";
position: absolute;
left: 45%;
top: -20px;
}