pointer events css w3schools

Firefox y Opera renderizan el borde incorrectamente

Question

He creado un menú circular usando trapezoides hechos con CSS puro, pero cuando los giro, Firefox muestra una línea en ambos lados y, en Opera, todos los trapezoides tienen un fondo de borde / color extraño, algo transparente. Los trapezoides se ven así .

.trapezoid {
  width: 100px;  height: 0px;
  margin: 55px auto 0 auto;
  border-bottom: 140px solid black;
  border-left: 35px solid transparent;
  border-right: 35px solid transparent;
  transition: rotate (100deg);
}

Chrome y IE9 están bien. ¿Cómo puedo encontrar una manera de solucionar esto?

Answer 1

Esto está sucediendo porque faltan los prefijos del proveedor. Aplique los prefijos de proveedores como sigue y lo hará bien.

La propiedad de transición se utiliza para establecer y sincronizar las transiciones.
https://developer.mozilla.org/en-US/docs/CSS/Using_CSS_transitions

.trapezoid {
  width: 100px;  height: 0px;
  margin: 55px auto 0 auto;
  border-bottom: 140px solid black;
  border-left: 35px solid transparent;
  border-right: 35px solid transparent;
  -webkit-transform: rotate(100deg);
    -moz-transform: rotate(100deg);
    -o-transform: rotate(100deg);
    -ms-transform: rotate(100deg);
    transform: rotate(100deg);
}

Answer 2

Querrás usar -moz para Firefox; -o para la opera. Esas son las extensiones para formatear correctamente dentro de esos navegadores. Un gran sitio para las formas aquí .

.trapezoid 
{ 
        border-bottom: 100px solid red; 
        border-left: 50px solid transparent; 
        border-right: 50px solid transparent; 
        height: 0; 
        width: 100px; 
        transform:rotate(180deg);
        -moz-transform:rotate(180deg); /* Firefox 4 */
        -webkit-transform:rotate(180deg); /* Safari and Chrome */
        -o-transform:rotate(180deg); /* Opera */

}

Además, no estoy seguro de si está intentando alterar un efecto de algún tipo; pero el código de transición se vería así:

  transition:width 2s, height 2s;
 -moz-transition:width 2s, height 2s, -moz-transform 2s; /* Firefox 4 */
 -webkit-transition:width 2s, height 2s, -webkit-transform 2s; /* Safari and Chrome */
 -o-transition:width 2s, height 2s, -o-transform 2s; /* Opera */

Solo agregue la transición antes de la mano; luego tirar la transformación en un hover. Si estás intentando agregarlo como un botón. Esperemos que eso ayude.

He usado Firebug para ver algunos datos adicionales; con Firefox 16.02 este código funcionó:

.trapezium
{
  height: 0px;
  width: 80px;
  border-bottom-width: 80px;
  border-bottom-style: solid;
  border-bottom-color: #2d9dcd;
  border-left-width-value: 40px;
  border-left-style-value: solid;
  border-left-color-value: transparent;
  border-right-width-value: 40px;
  border-right-style-value: solid;
  border-right-color-value: transparent;
  margin-top: 30px;
  margin-right: 0px;
  margin-bottom: 0px;
  margin-left: 10px;
}

Creo que eso es lo que buscas. Intenta eso y hazme saber si funciona.