带尖角的圆边

Question

我希望通过 CSS:

在一个元素上实现这些方面

这是我得到的最接近的（需要边框）：

div { 
  width: 120px;
  height: 100px;
  margin: 25px auto;
  border: 1px solid #000;
  border-top-left-radius: 200px 300%;
  border-bottom-left-radius: 200px 300%;
  border-top-right-radius: 200px 300%;
  border-bottom-right-radius: 200px 300%;
}

<div></div>

关于如何锐化边缘有什么建议吗？宽度需要可变。

Answer 1

如果您知道形状的大小，可以使用包装器 div 和 overflow: hidden 来解决这个问题。

我用的是flexbox来居中，但是你可以用其他方式来垂直居中。

.wrapper {
  display: flex;
  align-items: center;
  height: 100px;
  overflow: hidden;
}

.circle { 
  width: 120px;
  height: 120px;
  margin: 25px auto;
  background-color: black;
  border-radius: 100%;
}

<div class="wrapper">
   <div class="circle"></div>
</div>

Answer 2

您可以使用 :before 和 :after 伪元素:

.circle { 
  position: relative;
  width: 100px;
  height: 100px;
  margin: 25px auto;
  border-radius: 50%;
  background: #000;
}

.circle:before,
.circle:after {
  content: "";
  position: absolute;
  width: 100px;
  height: 25px;
  background: #fff;
}

.circle:before {
  top: -16px;
}

.circle:after {
  bottom: -16px;
}

<div class="circle"></div>

根据需要调整top和bottom属性的值。

Answer 3

您可以使用伪元素来做到这一点，就像这样，它会缩放到您在主元素上设置的任何大小

已更新

typ2 在 left/right 弧形边框上有相等的半径，如果你想用颜色、或图像、或动态可缩放的高度来填充它们，则需要一个额外的内部元素。

.typ1 div {
  position: relative;
  display: inline-block;
  width: 120px;
  height: 100px;
  margin: 0 30px;
  overflow: hidden;
}

.typ1 div + div { 
  width: 200px;
  height: 100px;
}

.typ1 div::before,
.typ1 div::after { 
  left: 0;
  top: -10%;
  width: 100%;
  height: 120%;
  border-radius: 100%;
  border: 1px solid #000;
}
.typ1 div::after { 
  left: 22%;
  top: 0;
  width: 56%;
  height: 100%;
  border-radius: 0;
  border-width: 1px 0;
}

.typ2 div { 
  position: relative;
  display: inline-block;
  width: 74px;
  height: 100px;
  margin: 5px 52px;
  border: 1px solid #000;
  border-width: 1px 0;
}

.typ2 div + div { 
  width: 156px;
}

.typ2 div::before,
.typ2 div::after { 
  left: -24px;
  top: -25%;
  width: 188px;
  height: 150%;
  border-radius: 100%;
  border: 1px solid transparent;
  border-left: 1px solid #000;
}
.typ2 div::after { 
  left: auto;
  right: -24px;
  border-left: none;
  border-right: 1px solid #000;
}

/* general styling */
div::before, div::after { 
  content: '';
  position: absolute;
  box-sizing: border-box;
}

<div class="typ1">
  <div></div>
  <div></div>
</div>

<div class="typ2">
  <div></div>
  <div></div>
</div>

带尖角的圆边

Rounded sides with sharp corners

html

css

rounded-corners

css-shapes