在圆内创建三个垂直点（省略号） [英] Create three vertical dots (ellipsis) inside a circle

问题描述

我想制作一个圆< div> ，如下图所示：

我已尝试过此代码。

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

 < div class = >< / div>  

正确？

解决方案

您可以使用： content：'•••'和 transform：rotate 。请注意，这是项目符号HTML特殊字符 •或 \\\• 。

div {position：relative;背景：＃3F3C53; width：50px; height：50px;颜色：白色; border-radius：50％; box-shadow：0px 0px 15px 1px＃4185BC; margin：50px;} div：after {content：'•••'; position：absolute; top：50％;左：50％; transform：translate（-50％，-50％）rotate（90deg）; font-size：15px;字母间距：4px; margin-top：2px;}

 < div> ; / div>  

I want to make a circle <div>, like this image:

I have tried this code.

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

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

How can I do this correctly?

解决方案

You could just use :after pseudo-element with content: '•••' and transform: rotate. Note that this is the bullet HTML special character •, or \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>

这篇关于在圆内创建三个垂直点（省略号）的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！