opacidad - opacity button css
¿Problema de borde transparente de CSS en Firefox 4? (2)
Estoy tratando de crear un triángulo CSS puro para una información sobre herramientas. Todos los navegadores se ven bien, excepto el último Firefox 4. Aquí está el código:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<title>Untitled Document</title>
<style>
.arrow {
border:50px solid;
border-color:#eee transparent transparent transparent;
display:block;
height:0;
width:0;
top:50%;
right:50%;
position:absolute;
}
</style>
</head>
<body>
<div style="border:1px solid #000; height:400px; width:400px; margin:50px auto; position:relative;">
<span class="arrow"></span>
</div>
</body>
</html>
Captura de pantalla de Firefox 4:
Captura de pantalla de otros navegadores:
Como se puede ver en Firefox 4, tiene algo así como un borde. ¿Es un error de Firefox o este es realmente el comportamiento?
¿Cómo puedo lograr un triángulo CSS puro sin ese borde visible en FF4? Además, necesito que los otros 3 colores sean transparentes porque este triángulo se superpondrá con algunos elementos.
Bien, pude ver el problema y descubrí que si cambia el estilo del borde a "inicio" si se solucionará en FF4, y también funciona en IE9.
Eso te daría algo como esto:
.arrow {
border:50px outset transparent ;
border-top:#eee 50px solid;
display:block;
height:0;
width:0;
top:50%;
right:50%;
position:absolute;
}
PD. Estoy en Vista con el nuevo Firefox estable.
Aquí está el jsFiddle: http://jsfiddle.net/UFSpd/1/
Si transparent no es trabajo para usted, entonces usar rgba puede ser ese trabajo.
Escribir:
.arrow {
border-color:#eee rgba(255,255,255,0) rgba(255,255,255,0) rgba(255,255,255,0);
}