css3 - How to make 3 vertical dots using CSS? -
i want have 3 dots on page to, example, toggle display of contextual menu. how can achieve using css?
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 @ 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>
Comments
Post a Comment