试图绕部分形状

时间：2015-08-11 03:35:50

标签： css css3 css-shapes

我知道你可以使用border-radius用CSS来对象进行舍入，但是我试图弄清楚如何在覆盖圆圈时对CSS形状的尖部进行舍入或可能隐藏：

如果没有Codepen，很难解释：

http://codepen.io/cavanflynn/pen/gpEdJo 

#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中，您可以看到圆圈以及白色部分溢出红色边界的位置。目标是摆脱白点并用红色完美地围绕白色，或者将白色覆盖的圆圈部分完全透明（比如从比萨饼中取出一片）。

4 个答案:

答案 0 :(得分：2)

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

＆＃13;
＆＃13; 
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;
}
＆＃13; 
<div></div>
＆＃13;
＆＃13;
＆＃13;

如果此处的角度太大，您可以复制:after元素上的伪元素，并使用transform:rotate(x deg);旋转到特定角度

当悬停在下面时，可以看到这个演示：

＆＃13;
＆＃13; 
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);
  }
＆＃13; 
<div></div>
＆＃13;
＆＃13;
＆＃13;

答案 1 :(得分：1)

您可以更改方法。停止使用: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/

答案 2 :(得分：1)

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

是的，border-radius属性可用于生成圈子，但仅当height和width相同时才能生成正确的圈子。在原始样本中，元素的height和width由border元素上的::before的厚度决定，因为一边的边框比其余的，它产生一个矩形而不是一个正方形。因此，你最多只能获得一个椭圆而不是一个圆圈。

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

我已更改以下代码段中其他三个边框的border-color，以帮助您查看正在发生的事情：

＆＃13;
＆＃13; 
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%;
}
＆＃13; 
<div id="circle"></div>
＆＃13;
＆＃13;
＆＃13;

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

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

这是一种替代方法，只需一个元素+两个伪元素即可创建与原本相同的形状。

形状由以下部分组成：

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

注意：我认为您使用transform时没有任何疑虑，因为您已标记了CSS3。

＆＃13;
＆＃13; 
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;
}
＆＃13; 
<div id="circle"></div>
＆＃13;
＆＃13;
＆＃13;

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

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

  • 此处容器有一些填充，并且通过使用content-box将容器限制为background-clip，使容器的背景变小。这形成了内部的黄色圆圈。
  • 外部红色圆圈由两个伪元素组成，每个伪元素的背景颜色仅为linear-gradient的一半部分。另一半是透明的。

  • 两个伪元素在相反的方向上旋转，使它看起来好像在它们之间留下透明切口。

    ＆＃13;
    ＆＃13; 
    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);
}
    ＆＃13; 
    <div id="circle"></div>
    ＆＃13;
    ＆＃13;
    ＆＃13;

  • 如果您不想使用linear-gradient生成半圆，那么您可以使用两个高度为宽度一半的伪元素创建相同的效果并指定相应的{ {1}}它。

    ＆＃13;
    ＆＃13; 
    border-radius
    ＆＃13; 
    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);
}
    ＆＃13;
    ＆＃13;
    ＆＃13;

enter image description here

答案 3 :(得分：0)

我已经检查过您的问题，请在 #circle：之前上试用此代码，然后您会看到三角形对齐; 

 #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 属性以摆脱三角形....希望它有所帮助。

相关问题
最新问题