CSS反転境界半径は、私は彼らだけが、この形状に従うような方法でCSSを使用して、これらの境界線を行うための方法があるかどうかを知りたい

Question

丸い角を描画しますCSSのpseudo-elements :: afterと:: beforeを使用しようとしましたが、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

これらは、スタイルです。したがって、タグスタイル= " - 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%; 
}