圓環容器設定：width:0,height:0,padding-bottom: "80%",padding-left:"80%",border:"3px solid red",borderRadius:"80%"

效果如下：

在圓環內顯示文字：

.ring {
  width: 0;
  height: 0;
  padding-bottom: 80%;
  padding-left: 80%;
  border: 3px solid red;
  border-radius: 80%;
  position: relative
}
.ring span {
  color: red;
  font-size: 14px;
  width: 100%;
  text-align: center;
  top: 50%;
  left: 0;
  position: absolute;
  height: 30px;
  line-height: 30px;
  margin-top: -15px;
}

效果如下：