[SOLUCIONADO] bootstrap tab css

[moscrates]

Hola amigos

Soy desarrollador de backend y solo se las cosas básicas para maquetar ya que mi fuertes es otra cosa, como angular,nodejs,php etc...

debido a un trabajo ahora debo de maquetar, cosa que no me agrada mucho pero ni modo hay que hacerlo estoy usando bootstrap el cual entiendo sin problema en su estrutura pero los acabados me dan mucho dolor.

debo de hacer que los tab (pestañas) tengas esta apariencia


al igual que los modales


Alguien puede ayudarme con esto. con una liga tal vez un manualito css expreso, alguna sugerencia de busqueda, alguna breve explicacion lo que sea se agradece..

soluods y gracias por su tiempo

[fede5426]

Podrias hacerlo con las pseudoclases :before y :after..

Código CSS:

li:before{
    content:" ";
    position:absolute;
    right:100%;
    top:0;
    border-right:8px solid #115191;
    border-top:15px solid transparent;
}
 
li:after{
    content:" ";
    position:absolute;
    left:100%;
    top:0;
    border-left:8px solid #115191;
    border-top:15px solid transparent;
}
 

Con eso agregarías los triángulos a ambos lados de los items de lista, si quisieras hacerlo como en la imagen que pasaste (es decir, de diferentes colores), tendrías que usar identificadores.. por ejemplo "li#rosa:after{ /* estilos */}" igual con :before y aplicado a cada color su respectivo identificador cambiando el color del border-left y border-right.

Te dejo un ejemplo en un codepen para que veas si es lo que buscas o entendí mal lo que querías..

http://codepen.io/fede5426/pen/pJxqjz

Saludos

[moscrates]

Muchas gracias por contestar
entendiste a la perfección lo que estoy tratando de hacer, trabajare sobre la ayuda que me brindaste y leeré un poco acerca de befores y after.

Muchas gracias por tu ayuda
saludos

[pzin]

Simplificando un poco el código:

Código CSS:

li:before,
li:after {
    content: "";
    position:absolute;
    top:0;
    border-top: 15px solid transparent;
}
 
li:before {
    right: 100%;
    border-right: 8px solid #115191;
}
 
li:after{
    left: 100%;
    border-left: 8px solid #115191;
}
 

Más DRY.

[moscrates]

quedo super