Grenze oben links und rechts Radius funktioniert nicht auf meinem div Element

Question

Ich möchte Kurven an der oberen linken und oberen rechten Ecke meiner div. Ich versuchte border-top-left-radius und border-top-right-radius, aber es scheint nicht zu funktionieren.

HTML:

<div id="trape"></div> 

CSS:

#trape{ 
    border-bottom: 100px solid red; 
    border-left: 0 solid transparent; 
    border-right: 50px solid transparent; 
    height: 0; 
    width: 100px; 
    border-top-left-radius:5px; 
    border-top-right-radius:10px; 
} 

Ich möchte Ausgabe etwas wie

Answer 1

im Bild unten gezeigt Dieses Ihr Problem lösen ..

.wrapper { 
 
    padding: 15px; 
 
    background: #f0f0f0; 
 
} 
 
.block { 
 
    width: 200px; 
 
    height: 80px; 
 
    padding: 25px; 
 
    background: #fff; 
 
    border-top-right-radius: 50px; 
 
    border-top-left-radius: 50px; 
 
}

<div class="wrapper"> 
 
    <div class="block"> 
 
    Your content goes here 
 
    </div> 
 
</div>

Answer 2

Sie können border-top-left-radius und border-top-right-radius CSS wie folgt verwenden:

#trape{ 
background-color: #E0E0E0; 
border-left: 0 solid transparent; 
border-top-left-radius: 2em; 
border-top-right-radius: 10em; 
height: 50px; 
text-align: center; 
line-height: 50px; 
color: white; 
width: 200px; 
} 

#trape{ 
 
background-color: #E0E0E0; 
 
border-left: 0 solid transparent; 
 
border-top-left-radius: 2em; 
 
border-top-right-radius: 10em; 
 
height: 50px; 
 
text-align: center; 
 
line-height: 50px; 
 
color: white; 
 
width: 200px; 
 
}

<div id="trape">Abstract Murals</div>

Hoffe, es hilft :)