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%; 
}