边框左上角和右半径不能在我的div元素上工作

Question

我想要我的div的左上角和右上角的曲线。我试过border-top-left-radius和border-top-right-radius，但它似乎没有工作。

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

我想输出是这样显示的图像下方在

Answer 1

这将解决你的问题..

.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

您可以使用border-top-left-radius和border-top-right-radius CSS是这样的：

#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>

希望它能帮助:)