Question

如图所示，如何创建具有弯曲边的块？ http://i.stack.imgur.com/jCyWw.png

我created 一个有两边阴影的块。但是如何创造我不知道的弯曲边的效果。

.comment{
  height:260px;
  width:280px;      
  margin: 10px auto;      
  padding: 0 40px;
  box-shadow:  -23px 0px 20px -23px rgba(0, 0, 0, .5),
  23px 0 20px -23px rgba(0, 0, 0, .5);   
 }

Answer 1

您应该添加border-radius

.comment{
  height:260px;
  width:280px;
  margin: 10px auto;
  padding: 0 40px;
  box-shadow:
   -23px 0px 20px -23px rgba(0, 0, 0, .5),
   23px 0 20px -23px rgba(0, 0, 0, .5);
  border-radius: 5% /50%;
}

这里有一个例子：

http://jsfiddle.net/Nac5V/7/

Answer 2

看看这个：DEMO

您必须将border-radius添加到bottom-left和bottom-right角落

并且必须从top-left和top-right角落删除：

.comment{
height:260px;
width:280px;
margin: 10px auto;
padding: 40px;
margin-bottom:5px;
padding-bottom:5px;
box-shadow:
   -23px 0px 20px -23px rgba(0, 0, 0, .5),
   23px 0 20px -23px rgba(0, 0, 0, .5);
border-radius:15%/70%;
border-top-left-radius:0px;
border-top-right-radius:0px;
}

还要查看margin-bottom和padding-bottom。

希望它能帮助你......干杯！

如何在图片中创建具有弯曲边的块？

2 个答案: