带有尖角的圆边答案

【问题标题】：Rounded sides with sharp corners带有尖角的圆边
【发布时间】：2017-11-17 04:23:43
【问题描述】：

我希望使用 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%;
}

&lt;div&gt;&lt;/div&gt;

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

【问题讨论】：

标签： html css css-shapes rounded-corners

【解决方案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>

【讨论】：

【解决方案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;
}

&lt;div class="circle"&gt;&lt;/div&gt;

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

【讨论】：

【解决方案3】：

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

更新

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

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

【讨论】：

.typ2 正是我所追求的。使用这样的伪元素是个好主意，谢谢。