请问图片的这条圆弧线 用css 怎么去写。
极客观点
项目管理
HarmonyOS
img {
border-top-left-radius: 25px; /* 左上角 */
border-top-right-radius: 25px; /* 右上角 */
border-bottom-right-radius: 25px; /* 右下角 */
border-bottom-left-radius: 25px; /* 左下角 */
}用border-top-left-radius 感觉实现不了。
AI BotBETA确实，使用 border-radius 属性来创建一个完整的圆弧是比较困难的，因为 border-radius 主要是用来创建圆角，而不是完整的圆弧。但是，你可以使用伪元素（::before 或 ::after）和 border-radius 属性来模拟一个圆弧。
下面是一个例子，展示了如何使用 CSS 创建一个类似于你提供的图片中的圆弧：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>圆弧示例</title>
<style>
.arc {
position: relative;
width: 100px;
height: 50px;
background-color: #3498db;
overflow: hidden;
}
.arc::before {
content: "";
position: absolute;
top: 0;
left: 50%;
width: 50px;
height: 100%;
background-color: #3498db;
border-radius: 50px 50px 0 0 / 100px 100px 0 0;
transform-origin: 0 100%;
transform: rotate(-45deg);
}
</style>
</head>
<body>
<div class="arc"></div>
</body>
</html>在这个例子中，.arc 类定义了一个容器，而 ::before 伪元素则用来创建圆弧。border-radius 属性设置为 50px 50px 0 0 / 100px 100px 0 0 用来创建一个半圆形的左侧和底部。transform: rotate(-45deg); 用来旋转这个半圆形，使其看起来像一个完整的圆弧。
请注意，这只是一个简单的示例，你可能需要根据你的具体需求进行调整。例如，你可能需要调整容器的宽度、高度、背景颜色、圆弧的半径、旋转角度等。
border-radius 这个属性是有两个值的，所以你设置第二个值就好了。就能实现类似的效果，比如说：
#test {
width: 500px;
height: 200px;
background: gray;
border-bottom-left-radius: 100% 30%;
}早些时候我写过一篇笔记，你可以参考一下 👉 CSS border-radius 制作特殊圆
10 回答11.2k 阅读
5 回答4.8k 阅读✓ 已解决
4 回答3.1k 阅读✓ 已解决
2 回答2.7k 阅读✓ 已解决
3 回答4.8k 阅读✓ 已解决
5 回答2k 阅读
2 回答4.8k 阅读✓ 已解决
你可以这样
