CSS - 倒圓角半徑畫一個圓角

Question

我想知道是否有一種方法只使用CSS的方式，他們遵循這個形狀做這些邊界：

我試圖使用CSS僞元素::之後和::之前，但我感覺不到div之間的差距。任何建議？

Answer 1

您可以使用僞元素來創建舍入的片段和「剪裁」的邊框。

.flex { 
 
    display: flex; 
 
    flex-direction: column; 
 
    align-items: flex-end; 
 
} 
 

 
.flex > * { 
 
    height: 50px; 
 
    position: relative; 
 
    display: flex; 
 
    align-items: center; 
 
} 
 

 
.flex > *:before { 
 
    content: ""; 
 
    position: absolute; 
 
    display: inline-block; 
 
    top: 10px; 
 
    bottom: 0px; 
 
    left: -90px; 
 
    width: 90px; 
 
    border-right: 2px solid red; 
 
    border-bottom: 2px solid red; 
 
    border-bottom-right-radius: 10px; 
 
} 
 

 
.flex > *:after { 
 
    content: ""; 
 
    position: absolute; 
 
    display: inline-block; 
 
    top: -2px; 
 
    height: 10px; 
 
    left: 0px; 
 
    width: 10px; 
 
    border-left: 2px solid red; 
 
    border-top: 2px solid red; 
 
    border-top-left-radius: 10px; 
 
} 
 

 
.flex > .one { 
 
    width: 100px; 
 
} 
 

 
.flex > .two { 
 
    width: 200px; 
 
} 
 

 
.flex > .three { 
 
    width: 300px; 
 
} 
 

 
.flex > .four { 
 
    width: 400px; 
 
} 
 

 
.degrees { 
 
    /* circle styles */ 
 
    width: 30px; 
 
    height: 30px; 
 
    border-radius: 50%; 
 
    border: 1px solid red; 
 
    
 
    /* styles for centering */ 
 
    display: flex; 
 
    align-items: center; 
 
    justify-content: center; 
 
    margin-left: 15px; 
 
}

<div class="flex"> 
 
    <div class="one"> 
 
    <div class="degrees">1°</div> 
 
    </div> 
 
    <div class="two"> 
 
    <div class="degrees">2°</div> 
 
    </div> 
 
    <div class="three"> 
 
    <div class="degrees">3°</div> 
 
    </div> 
 
    <div class="four"> 
 
    <div class="degrees">4°</div> 
 
    </div> 
 
</div>

Answer 2

這些樣式。因此，在標籤style =「 - moz-border-radius：5px;」

input[type=email] { 
    -moz-border-radius: 5px; 
    border-radius: 5px; 
    border: solid 1.4px black; 
    padding: 5px; 
    padding: 7px 7px 7px 7px; 
    max-width: 300px; 
    width: 80%; 
}