html - 用CSS创建 Angular 弧

Question

如何使用 css 创建这样的 Angular 弧？

这是入门模板:https://codepen.io/anon/pen/rwraXG

我希望我能够使用黑色外部 div 和红色内部 div，并使用边框半径让左上角显示出来。我在中途搞砸了。

.bar {
  width: 100px;
  height: 20px;
  background-color: red;
}

.outer {
  height: 100%;
  width: 8px;
  background-color: black;
}

.inner {
  height: 100%;
  width: 100%;
  background-color: red;
  border: 2px solid black;
  border-radius: 15px 0px 0px 0px:
}

<div class="bar">
  <div class="outer">
    <div class="inner"></div>
  </div>
</div>

Answer 1

修改了你的代码笔:https://codepen.io/anon/pen/dRjoow

本质上，这是一个语法错误。您的 border-radius 属性末尾有一个冒号 (:)，如下所示:

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

而不是像这样的分号 (;):

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

所以它没有渲染。