边框左上角和右半径不在我的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

您可以像这样使用setNames(expand.grid(rep(list(0:1), length(tmp))), tmp) # X1 X2 X3 X4 #1 0 0 0 0 #2 1 0 0 0 #3 0 1 0 0 #4 1 1 0 0 #5 0 0 1 0 #6 1 0 1 0 #7 0 1 1 0 #8 1 1 1 0 #9 0 0 0 1 #10 1 0 0 1 #11 0 1 0 1 #12 1 1 0 1 #13 0 0 1 1 #14 1 0 1 1 #15 0 1 1 1 #16 1 1 1 1 和border-top-left-radius css：

border-top-right-radius

＆＃13;

＆＃13;

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

＆＃13;

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

＆＃13;

＆＃13;

＆＃13;

希望有所帮助：）

Answer 2

这将解决您的问题..

＆＃13;

＆＃13;

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

＆＃13;

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

＆＃13;

＆＃13;

＆＃13;