试图圆形的一部分

Question

我知道您可以使用 border-radius 来使带有 CSS 的对象变圆，但我想弄清楚如何将 CSS 的尖角部分变圆或隐藏覆盖圆形时的形状：

没有 Codepen 很难解释：

#circle:before { 
  position:absolute;
  left: -10px;
  top: -25px;
  z-index: 100;
  content: "";
  border-right: 35px solid white;
  border-top: 25px solid transparent;
  border-bottom: 25px solid transparent;
  border-left: 25px solid transparent;
}

在 Codepen 中，您可以看到圆圈以及白色部分溢出红色边界的位置。目标是摆脱白点并用红色完美地围绕白色或使白色覆盖的圆部分完全透明（就像从比萨饼上切一片）。

Answer 1

我已经检查过你的问题，在你的 #circle:before 上尝试这段代码，你会看到三角形对齐；

 #circle:before { 
  position:absolute;
  left: -18px;
  top: -25px;
  z-index: 100;
  content: "";
  border-right: 35px solid white;
  border-top: 25px solid transparent;
  border-bottom: 25px solid transparent;
  border-left: 25px solid transparent;
}

或者您可以消除所有 #circle:before 属性来摆脱三角形....希望它有所帮助。

Answer 2

你可以改变方法。停止使用 :before 和 :after，并使用 overflow: hidden 加 z-index 与多个元素分层。

新的HTML:

<div class="circle">
    <div class="inner-circle"></div>
    <div class="triangle"></div>
</div>

CSS:

.circle {
    width: 200px;
    height: 200px;
    background: red;
    position: relative;
    top: 40px;
    border-radius: 50%;
    overflow: hidden;
    z-index: 10;
}

.inner-circle {
    width: 100px;
    height: 100px;
    border-radius: 50%;
    background: black;
    top: 50px;
    left: 50px;
    position: relative;
    z-index: 10;
}

.triangle {
    position:absolute;
    left: 25px;
    top: 25px;
    border-right: 105px solid purple;
    border-top: 75px solid transparent;
    border-bottom: 75px solid transparent;
    border-left: 75px solid transparent;
    z-index: 9;
}

查看演示：https://jsfiddle.net/ghv02ucr/1/

Answer 3

为什么 border-radius 对我的情况不起作用？

是的，border-radius 属性可以用来画圆，但是只有height和width相同才能画出正圆。在您的原始示例中，元素的 height 和 width 由 ::before 元素上的 border 的厚度决定，并且由于一侧的边框比其余的，它产生一个矩形而不是正方形。因此，您最多只能得到椭圆形而不是圆形。

即使边框粗细相同，圆的曲率也不会与外圆（父容器）的曲率匹配，因为半径和中心点都不同。

我已经更改了下面代码段中其他三个边框的 border-color，以帮助您直观地了解正在发生的事情：

body {
  background-color: black;
}
#circle {
  border-right: 50px solid red;
  border-left: 50px solid red;
  border-top: 50px solid red;
  border-bottom: 50px solid red;
  -moz-border-radius: 50px;
  -webkit-border-radius: 50px;
  border-radius: 50px;
  position: absolute;
  left: 35px;
  z-index: 100;
  top: 50px;
}
#circle:after {
  -moz-border-radius: 50px;
  -webkit-border-radius: 50px;
  border-radius: 50px;
  position: absolute;
  left: -25px;
  top: -25px;
  z-index: 100;
  content: "";
  border: 25px solid yellow;
}
#circle:before {
  position: absolute;
  left: -10px;
  top: -25px;
  z-index: 101;
  content: "";
  border-right: 35px solid white;
  border-top: 25px solid cyan;
  border-bottom: 25px solid cyan;
  border-left: 25px solid cyan;
  border-radius: 50%;
}

<div id="circle"></div>

另一种通常用于删除无关部分的方法是 overflow: hidden 但这也不适用于您的情况，因为您的外圈仅由 border 创建并且它不会' 实际上有任何内容高度或内容宽度。因此，当您添加 overflow: hidden 时，您的伪元素将完全隐藏。

我可以使用哪些其他选项？

这是另一种方法，可以仅使用一个元素 + 两个伪元素来创建与您最初打算创建的形状相同的形状。

形状由以下部分组成：

容器元素，使用border-radius: 50%.
一个伪元素，其尺寸是父元素的一半，border-radius: 50% 用于生成内圆。添加 z-index: 1 以将其定位在切片区域上方。
添加了 transform: rotate(45deg) 以生成切片的另一个伪元素。
父容器有 overflow: hidden 防止伪元素的其他部分出现。

^{注意：我想您不会对使用 transform 有任何顾虑，因为您已经标记了 CSS3.}

body {
  background-color: black;
}
#circle {
  position: relative;
  height: 200px;
  width: 200px;
  background: red;
  border-radius: 50%;
  overflow: hidden;
}
#circle:before, #circle:after {
  position: absolute;
  content: '';
  height: 100px;
  width: 100px;
}
#circle:before {
  top: 25%;
  left: 25%;
  background: yellow;
  border-radius: 50%;
  z-index: 1;
}
#circle:after {
  right: 0px;
  background: white;
  transform: rotate(45deg);
  transform-origin: left bottom;
}

<div id="circle"></div>

如何获得透明切片？（如科罗拉多州旗）

或者，如果您希望切片完全透明，则可以使用以下方法：

这里容器有一点填充，容器的背景通过使用 background-clip 限制为仅 content-box 变小。这形成了内部黄色圆圈。
外面的红色圆圈由两个伪元素组成，每个伪元素只有一半的背景色到linear-gradient。另一半是透明的。

两个伪元素以相反的方向旋转，使其看起来好像在中间留下了透明切口。

body {
  background-image: linear-gradient(to bottom, rgb(64, 64, 150) 33%, white 33%, white 66%, rgb(64, 64, 150) 66%);
  background-repeat: no-repeat;
  height: 260px;
}
#circle {
  position: relative;
  height: 100px;
  width: 100px;
  background: rgb(255, 243, 21);
  border-radius: 50%;
  padding: 50px;
  margin-top: 60px;
  margin-left: 50px;
  background-clip: content-box;
}
#circle:after,
#circle:before {
  position: absolute;
  content: '';
  top: 0px;
  left: 0px;
  height: 200px;
  width: 200px;
  border-radius: 50%;
  z-index: -1;
}
#circle:before {
  background: linear-gradient(to bottom, rgb(237, 51, 56) 50%, transparent 50%);
  transform: rotate(-45deg);
}
#circle:after {
  background: linear-gradient(to top, rgb(237, 51, 56) 50%, transparent 50%);
  transform: rotate(45deg);
}

<div id="circle"></div>

如果你不想使用linear-gradient来产生半圆那么你可以使用两个高度是宽度一半的伪元素来创建相同的效果并分配适合border-radius。

body {
  background-image: linear-gradient(to bottom, rgb(64, 64, 150) 33%, white 33%, white 66%, rgb(64, 64, 150) 66%);
  background-repeat: no-repeat;
  height: 260px;
}
#circle {
  position: relative;
  height: 100px;
  width: 100px;
  background: rgb(255, 243, 21);
  border-radius: 50%;
  padding: 50px;
  margin-top: 60px;
  margin-left: 50px;
  background-clip: content-box;
}
#circle:after,
#circle:before {
  position: absolute;
  content: '';
  top: 0px;
  left: 0px;
  height: 100px;
  width: 200px;
  background: rgb(237, 51, 56);
  border-radius: 100px 100px 0px 0px;
  transform-origin: 50% 100%;
  z-index: -1;
}
#circle:before {
  transform: rotate(-45deg);
}
#circle:after {
  bottom: 0px;
  transform: rotate(225deg);
}

<div id="circle"></div>

Answer 4

您可以使用伪元素实现此目的，并使用伪元素上的边框根据您的喜好来操纵形状。这在右侧使用 transparent 边框颜色，其余为纯色。演示如下所示：

html {
  background: url(http://lorempixel.com/800/900);
}
div {
  position: relative;
  height: 100px;
  width: 100px;
  border-radius: 50%;
  background: gold;
  margin: 150px auto;
}
div:before {
  content: "";
  position: absolute;
  top: -50px;
  left: -50px;
  height: 100%;
  width: 100%;
  border-radius: 50%;
  border: 50px solid red;
  border-right-color: transparent;
}

<div></div>

如果这里的角度对你来说太大了，你可以在:after元素上复制伪元素，然后使用transform:rotate(x deg);旋转到特定角度

将鼠标悬停在下方可以看到演示：

html {
  background: url(http://lorempixel.com/800/900);
}
div {
  position: relative;
  height: 100px;
  width: 100px;
  border-radius: 50%;
  background: gold;
  margin: 150px auto;
}
div:before, div:after {
  content: "";
  position: absolute;
  top: -50px;
  left: -50px;
  height: 100%;
  width: 100%;
  border-radius: 50%;
  border: 50px solid red;
  border-right-color: transparent;
  transition:all 0.8s;
}
div:hover:after{
  transform:rotate(45deg);
  }
div:hover:before{
  transform:rotate(-45deg);
  }

<div></div>

试图圆形的一部分

Trying to round part of shape

css

css-shapes