How to make 3 vertical dots using CSS?

Question

I want to have 3 dots on my page to, for example, toggle the display of a contextual menu. How can I achieve this using CSS?

why can't you just use the html list tags? Why does it have to be only css? — Brino, May 15 '15 at 13:03
I just need the bullets and not the text. On click of three dots a popover menu should popup — user4903904, May 15 '15 at 13:18
you should update your question to reflect that information. Please describe your question fully and in detail. — Brino, May 15 '15 at 13:19

Temani Afif · Accepted Answer · 2020-01-30 22:22:57Z

using an unicode char

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

<div class="test"></div>

Expand snippet

using background property

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

<div></div>

Expand snippet

shadow

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

<div></div>

Expand snippet

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>

Expand snippet

See the revision story (click on "edited May 15 ...)
– vals
May 24 '17 at 13:12 — vals, May 24 '17 at 13:12

Ashwin · Accepted Answer · 2017-03-06 11:22:26Z

Try this complete source code for 3 dot 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>

Expand snippet

Daniel Viglione · Accepted Answer · 2016-06-23 20:47:39Z

6

If you are using font-awesome, it is as easy as including the .fa-ellipsis-v style. Further documentation is found here: http://fontawesome.io/icon/ellipsis-v/.

answered Jun 23 '16 at 20:47

Daniel Viglione

6,2587 gold badges43 silver badges79 bronze badges

font-awesome vertical dots are so ugly (and squared)!! cf accepted unicode solution for proper style
– sritmak
Feb 13 '17 at 10:28

Add a comment |

kojow7 · Accepted Answer · 2019-10-06 21:14:57Z

5

Unicode includes ⠇ which is the Braille symbol for the letter "U". To use, just use the HTML entity ⠇ in your code.

answered Oct 6 '19 at 21:14

kojow7

7,76712 gold badges61 silver badges113 bronze badges

Add a comment |

Qammar Feroz · Accepted Answer · 2018-05-02 09:15:35Z

2

With fontawesome.css
```
<i class='fa fa-ellipsis-v'></i>
```

With Glyphicons

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

With css

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

answered May 2 '18 at 9:15

Qammar Feroz

6878 silver badges19 bronze badges

Add a comment |

vas · Accepted Answer · 2015-05-15 13:03:48Z

1

HTML

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

css:

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

answered May 15 '15 at 13:03

vas

9421 gold badge7 silver badges20 bronze badges

1

This appeared in the low quality review queue, most likely because you've given a code-only answer. I recommend including an explanation and reasoning behind your answer so that others can truly understand how and why this answers the quesiton.
– AdamMc331
May 15 '15 at 13:36
1

Your css is giving single dot. so i need to call this div for three times to achieve this. Can i have a single css which will give 3 dots, so i can call div at one time.
– user4903904
May 15 '15 at 13:37

Add a comment |

Jaison James · Accepted Answer · 2020-01-07 21:31:47Z

1

Most voted answer showed me with dotted with 2 column, So I accomplished with below Unicode character.

<div>&#xFE19;</div>

︙

answered Jan 7 '20 at 21:31

Jaison James

3,7154 gold badges31 silver badges46 bronze badges

Add a comment |

Anoop M · Accepted Answer · 2019-04-13 02:44:08Z

0

<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 dots.This can be used in cards in react

answered Apr 13 '19 at 2:44

Anoop M

293 bronze badges

Add a comment |

current community

your communities

more stack exchange communities

How to make 3 vertical dots using CSS?

8 Answers 8

Not the answer you're looking for? Browse other questions tagged css or ask your own question.

Linked

Hot Network Questions

8 Answers 8

Not the answer you're looking for? Browse other questions tagged css or ask your own question.

Linked

Related