html - 在 CSS 中绘制半圆形
问题描述
我正在尝试复制形状
当我在 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>
我怎样才能得到正确的形状?
解决方案
这可以使用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>
推荐阅读
- python - Django Admin:自动注销和托管问题
- java - System.currentTimeMillis()/1000 如何在 JAVA 中工作
- sql - 版本化数据库记录的数据库设计,多视图和少量更新
- java - 将菜单栏添加到 Gridpane
- html - 如何在电子应用程序中制作圆角
- git - 将现有项目添加到 GitHub
- javascript - Angular.js 6.1.0 - 变量未传递给视图
- java - android.content.res.Resources$NotFoundException:Recycleview 适配器类中的资源 ID #0x7f07007e
- postgresql - 使用 postgresql_fdw 导入外部类型
- javascript - 将 Button 作为 TableRowColumn 放在 material-ui 表中