带有弯曲边和尖角的矩形

Question

是否可以使用CSS制作类似于此图像的内容？矩形的每一边都有一条曲线。这与直边不同，只有边框是圆的。

Answer 1

您可以通过2个椭圆形的交叉来实现弯曲的侧面和尖角。您可以使用带有隐藏溢出的椭圆形div和带有黑色背景的椭圆形伪元素。

伪元素需要以其父元素为中心。在下面的例子中，我使用绝对定位来居中它：

div{
  position:relative;
  width:600px; height:150px;
  margin:0 -150px; 
  border-radius:50%;
  overflow:hidden;
}
div:after{
  content:'';
  position:absolute;
  top:-175px; left:150px;
  height:500px; width:300px;
  border-radius:inherit;
  background:#000;
}

<div></div>

Answer 2

电视屏幕 https://css-tricks.com/examples/ShapesOfCSS/

#tv {
  position: relative;
  width: 200px;
  height: 150px;
  margin: 20px 0;
  background: red;
  border-radius: 50% / 10%;
  color: white;
  text-align: center;
  text-indent: .1em;
}
#tv:before {
  content: '';
  position: absolute;
  top: 10%;
  bottom: 10%;
  right: -5%;
  left: -5%;
  background: inherit;
  border-radius: 5% / 50%;
}

Answer 3

你可以使用border-radius（如下所示）实现类似的东西

#rectangle {
    border-radius: 25px;
    padding: 20px; 
    width: 200px;
    height: 150px;    
}

这是一个CSS3功能。请记住，它仅适用于IE9及更高版本。