Halb Dreieck in CSS mit Grenzradius

Question

Ich habe diesen Code ein halben Dreieck mit CSS, aber ich brauche es einen Grenzradius in der Mitte des Dreiecks zu setzen, wie das Bild:

width: 0; 
height: 0; 
border-style: solid; 
border-width: 0px 30px 20px 0; 
border-color: transparent #bde5ff transparent transparent; 
border-top-left-radius: 2px; 

Irgendeine Idee ??

Answer 1

Sie können diesen Effekt mit einer Kombination von border-radius und transform: skew() auf Ihrem Dreieckselement erreichen. Wenn das Element geneigt wird, bleibt der Randradius-Effekt an der Ecke.

Hier ist ein funktionierendes Einzelelementbeispiel. Passen Sie die jeweiligen Werte Ihren Bedürfnissen an.

div { 
 
    width: 150px; 
 
    height: 150px; 
 
    position: relative; 
 
    background: lightblue; 
 
    border-radius: 8px; 
 
    margin-left: 30px; 
 
} 
 
div::before { 
 
    position: absolute; 
 
    left:0; 
 
    top: 20px; 
 
    content: ""; 
 
    width: 40px; 
 
    height: 40px; 
 
    border-radius: 8px; 
 
    background: lightblue; 
 
    transform: skew(50deg); 
 
}

<div></div>