我如何创建凹形边框？

我想创建一个完全像this的形状，但不在左侧和右侧边框。我想在顶部和底部边界上采取行动。有没有办法做到这一点没有边界半径我试图通过改变这样的边界半径命令角落里做到这一点：我如何创建凹形边框？

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

我不明白清楚，他是什么在边界半径做。他分两次输入！我们可以在css中使用*，/，+和 - 运算符我之前没有看到过这样的情况，当我在Google中搜索时我找不到任何东西！但它不适合我。

来源

2014-01-30 user2961617

下面介绍一种方法。您提供的小提琴是用伪元素（：前和：后）达到的效果，所以我调整了自己的高度/宽度和边界半径值：

#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/

来源

2014-01-30 19:47:21 Travis

另外，如果你遇到边界半径值的问题，有一些有用的工具在线： https：//developer.mozilla。 org/en-US/docs/Web/CSS/Tools/Border-radius_generator – Travis

谢谢数十亿 – user2961617

不是问题！如果这是正确的答案，请接受它，所以我得到信用;） – Travis

简单的方法将是旋转90度，改变高度&宽度：

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

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

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

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

来源

2014-01-30 19:38:58 Yani

这是很酷，但不幸的是我有一张图片作为背景，如果我把它旋转90deg，它会坠毁。而且这个css3命令在ie 8和7中不支持，并且导致很多问题 – user2961617

你需要的是重新定位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语法中知道/的使用。

来源

2014-01-30 19:47:14 DaniP

我如何创建凹形边框？

回答

相关问题