具有弯曲边和尖角的矩形

Question

是否可以用 CSS 制作类似于此图片的东西？矩形的每一边都有一条曲线。这与只有边界是圆形的直边不同。

Answer 1

您可以通过两个椭圆形的交集来实现弯曲的边和尖角。您可以使用带有隐藏溢出的椭圆形 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

您可以使用 border-radius 实现类似的效果（如下所示）

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

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

Answer 3

电视屏幕 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%;
}

具有弯曲边和尖角的矩形

Rectangle with curved sides and sharp corners

css

css-shapes