在圆圈内创建三个垂直点(省略号)

2024-01-10

我想做一个圆圈<div>,就像这张图片:

我已经尝试过这段代码。

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

我怎样才能正确地做到这一点?


你可以只使用:after伪元素与content: '•••' and transform: rotate。请注意,这是项目符号 HTML 特殊字符 http://www.fileformat.info/info/unicode/char/2022/index.htm , 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>
本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系:hwhale#tublm.com(使用前将#替换为@)

在圆圈内创建三个垂直点(省略号) 的相关文章