在圆圈内创build三个垂直点（省略号）

我想做一个圆圈<div> ，就像这个图像：

我已经试过这个代码。

 .discussion:after { content: '\2807'; font-size: 1em; background: #2d3446; width: 20px; height: 20px; border-radius: 100px; color:white; } 

 <div class="discussion"></div> 

我如何正确地做到这一点？

Answer 1

你可以使用:after带有content: '•••'伪元素:after content: '•••'和transform: rotate 。 请注意，这是项目符号HTML特殊字符 ，或者\u2022 。

 div { position: relative; background: #3F3C53; width: 50px; height: 50px; color: white; border-radius: 50%; box-shadow: 0px 0px 15px 1px #4185BC; margin: 50px; } div:after { content: '•••'; position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%) rotate(90deg); font-size: 15px; letter-spacing: 4px; margin-top: 2px; } 

 <div></div> 

Answer 2

在Nenad Vracar的回答中 ，有一个不使用文本的方法（所以它是独立于字体的），一切都很好地集中在一起：

 div { position: relative; background: #3F3C53; width: 50px; height: 50px; border-radius: 50%; box-shadow: 0px 0px 15px 1px #4185BC; margin: 50px; } div:after { content: ''; position: absolute; left: 50%; top: 50%; width: 2px; height: 2px; margin-left: -1px; margin-top: -1px; background-color: white; border-radius: 50%; box-shadow: 0 0 0 2px white, 0 11px 0 2px white, 0 -11px 0 2px white; } 

 <div></div> 

Answer 3

还有一个答案与其他答案一样，除了：

• 它使用垂直省略字符（U + 22EE）
• 文本alignment和行高来居中内容
• 不使用任何像素值

 .discussion:after { content: "\22EE"; /* box model */ display: inline-block; width: 1em; height: 1em; /* decoration */ color: #FFFFFF; background-color: #000000; border-radius: 50%; /* center align */ line-height: 1; text-align: center; } 

 <div class="discussion"></div> <div class="discussion" style="font-size: 2em;"></div> <div class="discussion" style="font-size: 3em;"></div> <div class="discussion" style="font-size: 4em;"></div> 

Answer 4

使用这个代码。

 .discussion { width: 20px; height: 20px; border-radius: 50%; position: relative; background: #2d3446; } .discussion:after { content: '\22EE'; font-size: 1em; font-weight: 800; color: white; position: absolute; left: 7px; top: 1px; } 

 <div class="discussion"></div> 

Answer 5

我希望这是你想要的！ 否则，请随时询问。

 .discussion{ display: block; /* needed to make width and height work */ background: #2d3446; width: 25px; height: 25px; border-radius: 100px; display: flex; align-items: center; justify-content: center; } .discussion:after { content: '\2807'; font-size: 1em; color: white; margin-left: 15%; } 

 <div class="discussion"></div> 

Answer 6

使用文本点

 .discussion{ width:50px; height:50px; text-align:center; background-color:black; border: 2px solid red; border-radius: 100%; } .discussion text{ writing-mode: tb-rl; margin-top:0.4em; margin-left:0.45em; font-weight:bold; font-size:2em; color:white; } 

 <div class="discussion"><text>...</text></div> 

Answer 7

 .discussion:after { content: '\2807'; font-size: 1em; display: inline-block; text-align: center; background: #2d3446; width: 20px; height: 20px; border-radius: 50%; color: white; padding:3px; } 

 <div class="discussion"></div> 

Answer 8

我已经删除（我发现如何做到这一点）我的所有post，下面的代码工作3垂直点成一个黑色的圆圈

 .discussion:after{ display:inline-block; content:'\22EE'; line-height:100%; border-radius: 50%; margin-left:10px; /********/ font-size: 1em; background: #2d3446; width: 20px; height: 20px; color:white; } 

 <div class="discussion"></div>