Saltar al contenido

¿Cómo hacer 3 puntos verticales usando CSS?

Hola, tenemos la solución a lo que necesitas, deslízate y la hallarás más abajo.

Solución:

utilizando un carácter Unicode

.test:after 
  content: '2807';
  font-size: 100px;
  

usando la propiedad de fondo

div 
    width: 100px;
    height: 100px;
    background-image: radial-gradient(circle, black 10px, transparent 11px);
    background-size: 100% 33.33%;

sombra

div 
  width: 30px;
  height: 30px;
  border-radius: 50%;
    background-color: black;
  box-shadow: 0px 40px 0px black, 0px 80px 0px black;

pseudo elementos

div 
  position: relative;
  width: 20px;
  height: 20px;
  background-color: black;
  border-radius: 50%;


div:before, div:after 
  content: "";
  position: absolute;
  width: 100%;
  height: 100%;
  left: 0px;
  background-color: inherit;
  border-radius: inherit;
  

div:before 
  top: 40px;
  


div:after 
  top: 80px;

Pruebe este código fuente completo para el menú de 3 puntos:

índice.html


    
        
            Three Dot Menu

            

            
            
        
        
            
        
    

Si está utilizando font-awesome, es tan fácil como incluir el .fa-ellipsis-v estilo. Puede encontrar más documentación aquí: http://fontawesome.io/icon/ellipsis-v/.

Aquí tienes las comentarios y calificaciones

¡Haz clic para puntuar esta entrada!
(Votos: 2 Promedio: 4.5)


Tags : /

Utiliza Nuestro Buscador

Deja una respuesta

Tu dirección de correo electrónico no será publicada. Los campos obligatorios están marcados con *