用css创建角落弧线

Question

您将如何使用css创建角落弧线？

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

我希望，我将能够使用黑色外的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

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

本质上，它是一个语法错误。你有一个冒号（:)在您的边界半径财产的最后是这样的：

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

，而不是一个分号（;）这样的：

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

所以还不是渲染。

Answer 2

小提琴：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 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到下面。您不需要在'.bar'上声明红色，因为'.inner'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'越好左上角的标签。