相关疑难解决方法(0)

我在stackoverflow上找到了这个例子:

仅使用css绘制圆形

哪个好.但我想知道如何修改该示例,以便我可以在圆圈中间包含文本？

我也发现了这一点: 在CSS中以圆圈为中心的文本垂直和水平居中(如iphone通知徽章)

但由于某种原因,它不适合我.当我创建以下测试代码时:

<div class="badge">1</div>

而不是一个圆圈,我得到一个椭圆形状.我正在尝试使用代码来了解如何让它工作.

我在SO的答案之一中找到了以下CSS,我想知道为什么它会创建所需的心形:

      #heart { 
        position: relative; 
        width: 100px; 
        height: 90px; 
      } 

      #heart:before, #heart:after { 
        position: absolute; 
        content: ""; 
        left: 50px; 
        top: 0; 
        width: 50px; 
        height: 80px; 
        background: red; 
        border-radius: 50px 50px 0 0; 
        -webkit-transform: rotate(-45deg); 
        -moz-transform: rotate(-45deg); 
        -ms-transform: rotate(-45deg); 
        -o-transform: rotate(-45deg); 
        transform: rotate(-45deg); 
       -webkit-transform-origin: 0 100%; 
       -moz-transform-origin: 0 100%; 
       -ms-transform-origin: 0 100%; 
       -o-transform-origin: 0 100%; 
       transform-origin: 0 100%; 
     } 

      #heart:after { 
        left: 0; 
        -webkit-transform: rotate(45deg); 
        -moz-transform: rotate(45deg); 
        -ms-transform: rotate(45deg); 
        -o-transform: rotate(45deg); 
       transform: rotate(45deg); 
       -webkit-transform-origin: 100% 100%; 
       -moz-transform-origin: 100% 100%; 
       -ms-transform-origin: 100% …