javascript - 如何创建凹形边框？

Question

我想创建一个完全像 this 的形状但不在左右边界上。我想在顶部和底部边界上行动。有没有没有边界半径的方法 我试图通过像这样更改 border-radius 命令中的 Angular 来做到这一点:

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

我不太明白他在 border-radius 上做了什么。他分两个输入!!!我们可以在 css 中使用 *、/、+ 和 - 运算符吗？我以前从未见过这样的，当我在谷歌中搜索时，我找不到任何东西!! 但它对我不起作用。

Answer 1

这是一种方法。您提供的 fiddle 是使用伪元素(:之前和:之后)来实现效果，所以我调整了它们的高度/宽度和边框半径值:

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

fiddle :http://jsfiddle.net/KcP5k/24/