用css创建角落弧

Question

你会如何使用css创建这样的角落弧？

这是初学者模板：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://jsfiddle.net/m8wf66u6/

HTML：

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

CSS：

.outer {
  height: 200px;
  width: 400px;
  background-color: black;
}

.inner {
  height: 100%;
  width: 100%;
  background-color: red;
  border-top-left-radius: 20px;
}

Answer 2

修改了您的codepen：https://codepen.io/anon/pen/dRjoow

基本上，这是一个语法错误。你在border-radius属性的末尾有一个冒号（:)，如下所示：

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

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

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

所以它没有呈现。

Answer 3

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

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

请注意，您也可以使用：

border-top-left-radius: 15px;

Answer 4

我建议您使用以下2个DIV进行操作： HTML：

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

CSS：

.outer,.inner{
  width:200px;
  height:80px;
}
.outer {
  background-color:black;
}
.inner {
  background-color:red;
  border-radius:20px 0 0 0; /* numbers are :  top left bottom right*/
}

https://codepen.io/FaridNaderi/pen/pwZJyP

希望有所帮助

Answer 5

可以像使用内盒和外盒一样进行此操作。你可以将你的CSS更改为以下。您不需要在＆＃39; .bar＆＃39;上声明颜色为红色。因为你的＆＃39; .inner＆＃39; 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（＆＃39; .bar＆＃39;）具有设定的宽度和高度＆＃39; .inner＆＃39;和＆＃39; .outer＆＃39;可以有100％的宽度和高度。

*请注意，虽然你做得越高＆＃39; .bar＆＃39;左上方标签看起来越好。