在 CSS 中绘制半圆形

Question

我正在尝试复制形状

当我在 CSS 中使用圆形时，它看起来有些不同：

 .shape{ display: inline-block; text-align: center; line-height: 18px; border-radius: 9px 9px 9px 9px; color: #000000; padding-left: 6px; padding-right: 6px; font-weight: bold; font-family: sans-serif; }.shape.orange{ background-color: #FF931B; }

 <span class="shape orange">CC6</span>

我怎样才能得到正确的形状？

Answer 1

这可以使用radial-gradient来完成

 .shape{ display: inline-block; font-size:50px; line-height:1.5em; padding:0 0.4em; font-weight: bold; font-family: sans-serif; background: radial-gradient(100% 50% at right, #FF931B 98%,transparent 100%) left, radial-gradient(100% 50% at left, #FF931B 98%,transparent 100%) right, #FF931B content-box; /*Don't color the padding to keep it for radial-gradient*/ background-size:0.4em 100%; /* Width same as padding and height 100%*/ background-repeat:no-repeat; }

 <span class="shape">CC6</span> <span class="shape" style="font-size:70px">CC6</span> <span class="shape" style="font-size:15px">CC6</span>

或者使用如下的border-radius ：

 .shape{ display: inline-block; font-size:50px; line-height:1.5em; padding:0 0.4em; font-weight: bold; font-family: sans-serif; background: #FF931B; border-radius:0.4em/50%; }

 <span class="shape">CC6</span> <span class="shape" style="font-size:70px">CC6</span> <span class="shape" style="font-size:15px">CC6</span>