html - 如图所示，如何创建带有 flex 边的块？

如图所示，如何创建带有弯曲边的块？
    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);
 }

最佳答案

您应该添加边框半径

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