css - 是否有相反方向（反转）曲线的可能性？

Question

请检查下面的小提琴链接，有没有办法实现相反方向的曲线（反转），

js小提琴链接

.roundCorner
{
width: 170px;
height: 20px;
padding: 2em;
border: 1px solid;
border-radius: 0 0 13em 13em / 0 0 3em 3em
}

边界半径：0 0 -13em -13em / 0 0 -3em -3em不工作。谢谢！

Answer 1

根据CSS3 标准“不允许负值”。所以我认为任何网络浏览器都不太可能增加对你想要实现的目标的支持。

您可能必须使用自定义边框图形的边框图像来实现您想要的外观。有关这方面的一些提示，请参阅了解边框图像。

Answer 2

经过一番折腾，这就是我所拥有的。

.roundCorner {
  width: 170px;
  height: 20px;
  padding: 2em;
  border: 1px solid;
  border-bottom:0;
  position:relative;
}
.roundCorner:after {
  position:absolute;
  left:-1px;right:-1px;bottom:0;
  height:1.5em;
  border:1px solid black;
  border-bottom:0;
  border-radius: 13em 13em 0 0 / 3em 3em 0 0;
  content:'';
}

基本上它使用伪元素来生成元素的底部边框。这是hax，但它似乎有效。

Answer 3

您可以通过使用 :before 伪选择器添加一个元素来伪造它，然后对该元素应用圆角边框。例如：

http://jsfiddle.net/gkghc/

.roundCorner
{
    width: 170px;
    height: 20px;
    padding: 20px;
    border: 1px solid;
    border-bottom: 0;
    position: relative;
}

.roundCorner:before {
    content: "";
    display: block;
    width: 170px;
    height: 10px;
    padding: 20px;
    border-top: 1px solid black;
    border-radius: 13em 13em 0 0 / 3em 3em 0 0;
    position: absolute;
    left: 0px;
    top: 30px;
}