用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'越好左上角的標籤。