我正试图在单人范围内实现半径.好吧，让我展示一下我在try 什么，我想要什么:
.bar{
height: 20px;
border-radius: 2.5rem;
background: linear-gradient(to right, green 0%, green 50%,gray 50%,gray 100%);
}<div class='bar'></div>
你可以看到光滑的绿色圆头
推荐答案
你可以借助::after个伪元素来实现它
.bar{
height: 20px;
border-radius: 2.5rem;
background: gray;
position: relative;
}
.bar::after{
content: "";
position: absolute;
top:0;
left:0;
width: 50%;
height: 20px;
border-radius: 2.5rem;
background: green;
}<div class="bar"></div>Html相关问答推荐
卸载伪元素 destruct 了CSS
如何删除html原生对话框的宽度
当使用浮动标签和大小时，如何在 Select 组件中有更多可见选项？
如何防止可见的滑动抽屉，同时转移HTML方向？
如何在一行文本溢出省略号后显示文本？
在Chrome中使用手写笔时，滚动条方向反转
为什么在添加文本时网格区域会调整大小？
CSS Grid：使网格行填充屏幕，将下一行推离屏幕
我无法动态嵌入Instagram帖子，因为无法分配Instagram固定链接
错误时交换表单，成功时使用HTMX重定向
如何在 Bootstrap 5 中将两个导航栏元素放在末尾？
如何使用 HTML 将对象数组发送到 Nodejs Express
如何居中此按钮，即使它已经在计算机分辨率中居中
为 HTML5 文本字段设置最后六位正则表达式模式
需要帮助个性化我的 CSS 导航栏：如何在鼠标悬停时突出显示 元素？
如何调整网格中单元格的高度？
如何在没有容器的情况下沿基线将 div 中的元素居中？
使用 CSS 样式化进度条
在中心而不是边界处填充 svg 的背景
表格布局：固定；文本溢出单元格时不起作用
实用课程推荐