Geek Answers Handbook

How to make 3 vertical dots using CSS?

I want to have 3 points on my page, for example, to switch the display of the context menu. How can I achieve this with CSS?

3-point toggle gif animation

+17
css css3
source share
8 answers

using unicode char

.test:after { content: '\2807'; font-size: 100px; } 
 <div class="test"></div>

using background property

 div { width: 100px; height: 300px; background-image: radial-gradient(circle at center, black 10px, transparent 10px); background-size: 100px 100px; } 
 <div></div>

Shadow

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

pseudo elements

 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; } 
 <div></div>
+69
source share

Try this full source code for a three-point menu:

index.html

 <!DOCTYPE html> <html> <head> <title>Three Dot Menu</title> <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script> <style> *{margin: 0;padding:0px} .header{ width: 100%; background-color: #0d77b6 !important; height: 60px; } .showLeft{ background-color: #0d77b6 !important; border:1px solid #0d77b6 !important; text-shadow: none !important; color:#fff !important; padding:10px; } .icons li { background: none repeat scroll 0 0 #fff; height: 7px; width: 7px; line-height: 0; list-style: none outside none; margin-right: 15px; margin-top: 3px; vertical-align: top; border-radius:50%; pointer-events: none; } .btn-left { left: 0.4em; } .btn-right { right: 0.4em; } .btn-left, .btn-right { position: absolute; top: 0.24em; } .dropbtn { background-color: #4CAF50; position: fixed; color: white; font-size: 16px; border: none; cursor: pointer; } .dropbtn:hover, .dropbtn:focus { background-color: #3e8e41; } .dropdown { position: absolute; display: inline-block; right: 0.4em; } .dropdown-content { display: none; position: relative; margin-top: 60px; background-color: #f9f9f9; min-width: 160px; overflow: auto; box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2); z-index: 1; } .dropdown-content a { color: black; padding: 12px 16px; text-decoration: none; display: block; } .dropdown a:hover {background-color: #f1f1f1} .show {display:block;} </style> <script> function changeLanguage(language) { var element = document.getElementById("url"); element.value = language; element.innerHTML = language; } function showDropdown() { document.getElementById("myDropdown").classList.toggle("show"); } // Close the dropdown if the user clicks outside of it window.onclick = function(event) { if (!event.target.matches('.dropbtn')) { var dropdowns = document.getElementsByClassName("dropdown-content"); var i; for (i = 0; i < dropdowns.length; i++) { var openDropdown = dropdowns[i]; if (openDropdown.classList.contains('show')) { openDropdown.classList.remove('show'); } } } } </script> </head> <body> <div class="header"> <!-- three dot menu --> <div class="dropdown"> <!-- three dots --> <ul class="dropbtn icons btn-right showLeft" onclick="showDropdown()"> <li></li> <li></li> <li></li> </ul> <!-- menu --> <div id="myDropdown" class="dropdown-content"> <a href="#home">Home</a> <a href="#about">About</a> <a href="#contact">Contact</a> </div> </div> </div> </body> </html>
+16
source share

If you use font-awesome, it is as simple as including .fa-ellipsis-v . Further documentation is here: http://fontawesome.io/icon/ellipsis-v/ .

+5
source share

  1. C fontawesome.css

     <i class='fa fa-ellipsis-v'></i>

  2. With glyphics

     <span class="glyphicons glyphicons-option-vertical"></span>

  3. With CSS

     .textSpan:after { content: '\2807'; font-size: 3em; color: #2e2e2e }
+2
source share

HTML

 <div class="dot"></div>

CSS

 .dot{ width: 10px; height: 10px; background: red; -moz-border-radius: 5px; -webkit-border-radius: 5px; border-radius: 5px; }
+1
source share

You don't need css (unless you specifically structure your HTML code differently), html ul works just like out of the box

For example:

 <ul> <li>Item 1</li> <li>Item 2</li> </ul>
0
source share

Unicode includes & # 10247; which is the braille symbol for the letter "U". To use, just use the HTML entity &#10247; in your code.

0
source share
 <script> <meta name="viewport" content="width=device-width, initial-scale=1"/> <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css"></link></script> <i class="fa fa-ellipsis-v col-2 mt-3 .text-light fa-lg" style={{"float":"right"}}></i>

This can be used to see three points. It can be used in cards in the reaction.

-one
source share

More articles:


All Articles