Hacer menú con triángulo hacia adentro

[virla]

cuando el item del menu esta activo quisiera que se vea asi.



encontre como hacer triangulos en css pero no invertidos

Espero puedan ayudarme
Gracias

[PHPeros]

Los links de google docs solo puedes verlos tu como preview, así que súbela a tinypic o descárgatela y adjúntala como imagen en tu post...

[PHPeros]

Me aburría... Aquí tienes el code:

Código HTML:

<div id="triangle" role="soy_un_triangulo"></div>
 

Código CSS:

#triangle {
width: 0px; 
height: 0px; 
border-left:  50px solid transparent;
border-right: 50px solid transparent; 
border-bottom: 50px solid red;
}
 

mmm... Es bastante divertido: Si quieres que vaya hacia el otro lado no hace falta decir que tienes que cambiar border-bottom por border-top. Saludos!

[pzin]

Crear triángulos de forma invertida en CSS no puede hacerse así tal cual. Tendrías que aplicar el truco de los bordes pero a dos elementos diferentes. Como existen dos pseudo-elementos, :before y :after, podrías hacer algo así:

Código HTML:

<div>
  <img src="imagen.jpg">
</div>
 

Código CSS:

div {
  position: relative;
  display: inline-block;
  overflow: hidden;
}
 
div:before,
div:after {
  position: absolute;
  top: 0;
  left: -30px;
  width: 50%;
  border-top: 30px solid;
  border-right: 30px solid transparent;
  color: white;
  content: '';
}
div:after {
  right: -30px;
  left: auto;
  border-right: none;
  border-left: 30px solid transparent;
}
 

Quedaría como esto:

[virla]

de algo asi lo pude sacar en realidad es el triangulo mirando hacia adentro no hacia afuera.
gracias igual por la ayuda

[pzin]

Iniciado por virla

de algo asi lo pude sacar en realidad es el triangulo mirando hacia adentro no hacia afuera.
gracias igual por la ayuda

Hay que explicarse mejor pues.