CSS从矩形切出圆形
我设法实现了这种效果但是我对标记并不满意。另外，在IE10/11中有一个奇怪的错误，在您调整窗口大小时会显示1px的间隙。
还有其他方法吗？或者也许在IE中修复此问题。
编辑 圆不能使用边框，它应该是透明的。
body,
html {
font-size: 18px;
}
body {
background-color: #fff
}
.avatar {
width: 90px;
height: 90px;
position: absolute;
background-color: red;
top: -115px;
left: 5px;
border-radius: 80px;
}
.wrap {
display: block;
margin: 100px auto 0 auto;
width: 90%;
position: relative;
}
.rect-left,
.rect-right {
position: relative;
width: 50%;
height: 150px;
float: left;
}
.rect-left {
margin-left: -50px;
}
.rect-right {
margin-right: -50px;
}
.inner {
position: absolute;
top: 0;
left: 50px;
right: 0;
bottom: 0;
height: 100%;
background: rgba(0, 0, 0, 0.8);
}
.rect-left .inner {
left: 50px;
right: 0;
-webkit-border-top-left-radius: 6px;
-webkit-border-bottom-left-radius: 6px;
-moz-border-radius-topleft: 6px;
-moz-border-radius-bottomleft: 6px;
border-top-left-radius: 6px;
border-bottom-left-radius: 6px;
}
.rect-right .inner {
left: 0;
right: 50px;
-webkit-border-top-right-radius: 6px;
-webkit-border-bottom-right-radius: 6px;
-moz-border-radius-topright: 6px;
-moz-border-radius-bottomright: 6px;
border-top-right-radius: 6px;
border-bottom-right-radius: 6px;
}
.rect {
float: left;
height: 100px;
width: 100px;
background: rgba(0, 0, 0, 0.8);
position: relative;
top: 50px;
}
.circle {
display: block;
width: 100px;
height: 50px;
top: -50px;
left: 0;
overflow: hidden;
position: absolute;
}
.circle:after {
content: '';
width: 100px;
height: 100px;
-moz-border-radius: 100px;
-webkit-border-radius: 100px;
border-radius: 100px;
background: rgba(0, 0, 0, 0);
position: absolute;
top: -110px;
left: -40px;
border: 40px solid rgba(0, 0, 0, 0.8);
}
<div class="wrap">
<div class="rect-left">
<div class="inner"></div>
</div>
<div class="rect"> <span class="circle"></span>
<div class="avatar"></div>
</div>
<div class="rect-right">
<div class="inner"></div>
</div>
</div>
问题答案：
您可以使用单个元素（加上伪元素）来完成此操作，radial-gradient而伪元素会创建圆，而父元素将背景用作背景。
div:before { /* creates the red circle */
position: absolute;
content: '';
width: 90px;
height: 90px;
top: -75px; /* top = -75px, radius = 45px, so circle's center point is at -30px */
left: calc(50% - 45px);
background-color: red;
border-radius: 50%;
}
div {
position: relative;
margin: 100px auto 0 auto;
width: 90%;
height: 150px;
border-radius: 6px;
/* only the below creates the transparent gap and the fill */
background: radial-gradient(50px 50px at 50% -30px, rgba(0, 0, 0, 0) 49.5px, rgba(0, 0, 0, .8) 50.5px); /* use same center point as with concentric circles but larger radius */
}
/* just for demo */
body,
html {
font-size: 18px;
}
body {
background-image: radial-gradient(circle, #3F9CBA 0%, #153346 100%);
}
<div></div>
-
我想从矩形照片中制作一个居中的圆形图像。照片的尺寸未知。通常是矩形。我尝试了很多方法： 密码
-
主要内容：圆角矩形,椭圆示例JavaFX Shape类定义了常见的形状，例如线，矩形，圆，Arc，CubicCurve，Ellipse和QuadCurve。 在场景图上绘制矩形需要宽度，高度和左上角的(，)位置。 要在JavaFX中绘制一个矩形，可以使用类。 上面的代码生成以下结果。 圆角矩形 类实现了弧宽和弧高。可以使用这些功能来绘制圆角矩形。 上面的代码生成以下结果。 椭圆示例 上面的代码生成以下结果。
-
本文向大家介绍刻在椭圆上的矩形内切三角形的面积？，包括了刻在椭圆上的矩形内切三角形的面积？的使用技巧和注意事项，需要的朋友参考一下 为了理解这个复杂的问题，让我们分两部分进行。首先，我们将找到矩形的尺寸，并根据该尺寸找到内接的三角形的面积。 使用椭圆和微分方程，矩形面积的数学公式为： 面积= 2ab， 其中2a =长轴，2b =短轴。 可以内接在矩形中的最大三角形应位于相同的基座上，并且在矩形的
-
我需要找到从圆和矩形的交点创建的最大弧线。我有了圆心，半径和矩形的坐标，我需要找到与圆心交点的角。 我有一个可以工作的代码，但它是通过迭代圆周上的点来计算解的，我想知道是否有更优雅的方法来使用三角学而不是“蛮力”来计算解。 这是我的代码：
-
我有一个问题，碰撞检测一个圆和一个矩形。我曾尝试用勾股定理来解决这个问题。但所有查询都不起作用。矩形与圆的矩形包围盒发生碰撞。
-
问题内容： 我想将a 切成一个圆圈，以便可以将其用作注释。我在此网站上找到的每个答案都描述了创建一个，然后对其进行修改并显示出来，但是您无法将注释的图像设置为，只能是。我应该怎么做？ 问题答案： 如果需要，请确保导入QuarzCore。