Html 使用css创建角弧

如何使用css创建这样的角弧

这是初学者模板：

我希望我能够使用黑色的外底和红色的内底，并使用边界半径只留下左上角显示通过。我中途把东西弄糟了

.bar{
宽度：100px；
高度：20px；
背景色：红色；
}
.外部{
身高：100%；
宽度：8px；
背景色：黑色；
}
.内部{
身高：100%；
宽度：100%；
背景色：红色；
边框：2件纯黑；
边界半径：15px 0px 0px 0px：
}

小提琴：

HTML:

小提琴：

HTML:

修改您的代码笔：

本质上，这是一个语法错误。在边界半径属性的末尾有一个冒号（：），如下所示：

.inner{
  ...
  border-radius: 15px 0px 0px 0px:
} 

.inner{
  ...
  border-radius: 15px 0px 0px 0px;
} 

而不是像这样的分号（；）：

.inner{
  ...
  border-radius: 15px 0px 0px 0px:
} 

.inner{
  ...
  border-radius: 15px 0px 0px 0px;
} 

所以它没有渲染。

修改了您的代码笔：

本质上，这是一个语法错误。在边界半径属性的末尾有一个冒号（：），如下所示：

.inner{
  ...
  border-radius: 15px 0px 0px 0px:
} 

.inner{
  ...
  border-radius: 15px 0px 0px 0px;
} 

而不是像这样的分号（；）：

.inner{
  ...
  border-radius: 15px 0px 0px 0px:
} 

.inner{
  ...
  border-radius: 15px 0px 0px 0px;
} 

---

所以它没有渲染。

唯一的问题是最后一行末尾的

：

border-radius: 15px 0px 0px 0px;

请注意，您还可以使用：

border-top-left-radius: 15px;

---

唯一的问题是最后一行末尾的

：

border-radius: 15px 0px 0px 0px;

请注意，您还可以使用：

border-top-left-radius: 15px;

---

我建议您使用以下两个div： HTML:

---

希望对您有所帮助

我建议您使用以下两个div： HTML:

---

希望对您有所帮助

您可以使用现有的内盒和外盒来实现这一点。您可以将css更改为以下内容。您不需要在“.bar”上声明红色，因为您的“.internal”div将是其中的红色部分

.bar{
  width:200px;
  height:100px;
}
.outer{
  height:100%;
  width:100%;
  background-color:black;
}
.inner{
  height:100%;
  width:100%;
  background-color:red;
  border-radius: 20px 0 0 0;
}

只要父div（“.bar”）具有设置的宽度和高度，“.inner”和“.outer”可以具有100%的宽度和高度

---

*请注意，您的“.bar”越高，左上角选项卡的外观就越好。

可以使用您现有的内框和外框进行此操作。您可以将css更改为以下内容。您不需要在“.bar”上声明红色，因为您的“.internal”div将是其中的红色部分

.bar{
  width:200px;
  height:100px;
}
.outer{
  height:100%;
  width:100%;
  background-color:black;
}
.inner{
  height:100%;
  width:100%;
  background-color:red;
  border-radius: 20px 0 0 0;
}

只要父div（“.bar”）具有设置的宽度和高度，“.inner”和“.outer”可以具有100%的宽度和高度

*但请注意，您的“.bar”越高，左上角的选项卡看起来就越好