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

Question

请检查下面的 fiddle 链接，是否有任何方法可以实现相反方向的曲线(反转)，

js fiddle link

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

border-radius: 0 0 -13em -13em/0 0 -3em -3em 不起作用。谢谢!

Answer 1

经过一些修改，here's what I've got .

.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，但它似乎有效。