Question

我想创建一个完全this的形状，但不能创建左右边框。我想在顶部和底部边界上行动。有没有办法没有border-radius 我尝试通过更改border-radius命令中的角来实现，如下所示：

   border-radius: 60px 0 0 60px / 300px 0 0  300px;
   display: block;
   content: '';
   position: relative;

我不太清楚他在边界半径上做了什么。他划分了两个输入!!!我们可以在css中使用*，/，+和 - 运算符我之前和之后没有看到这样的搜索在谷歌我找不到任何东西！但它对我不起作用。

Answer 1

简单的方法是将其旋转90度并改变高度和高度。宽度：

-webkit-transform: rotate(-90deg);

/* Firefox */
-moz-transform: rotate(-90deg);

/* IE */
-ms-transform: rotate(-90deg);

/* Opera */
-o-transform: rotate(-90deg);

Answer 2

您需要的是重新定位after and before伪元素，如下所示：

#test:before{
   border-radius: 0 0 100px 100px / 0 0 60px 60px;
   display: block;
   position:absolute;
   top:0;
}
#test:after{
  border-radius:100px  100px 0 0/ 60px 60px 0 0;
  display: block;
  position: absolute;
  bottom:0;
}

选中 Demo Fiddle

Here 您可以在/语法中了解border-radius的用法。

Answer 3

这是一种方法。你提供的小提琴是使用伪元素（：before和：after）来实现效果，所以我调整了它们的高度/宽度和border-radius值：

#test{
    width: 100px;
    height: 300px;
    background: green;
    position: relative;
    display: inline-block;
}

#test:before{
    background: white;
    height: 15px;
    width: 100px;
    border-radius: 0 0 50% 50%;
    display: inline-block;
    content: '';
    position: absolute;
    top: 0;
    left: 0;
}

#test:after{
    background: white;
    height: 15px;
    width: 100px;
    border-radius: 50% 50% 0 0 ;
    display: inline-block;
    content: '';
    bottom: 0;
    position: absolute;
}

小提琴：http://jsfiddle.net/KcP5k/24/

我怎样才能创建凹边框？

3 个答案: