我需要帮助了解clip-path CSS属性,以便在下面制作我的剪裁圆圈版本...
更像是设计版本:
如果您能在灰色的背景上看到,则我的圆圈在被裁剪时显得更大而不太圆。
如何做一个更大的圆?我的想法是:
:after
元素或带有半径的右边界最好,我想避免使用背景图片。但是,我需要牢记响应能力,因为在调整窗口大小时,圆不能急剧改变形状。
剪切路径是正确的方法吗?有人可以用另一种使用CSS的方式提出一个更简单,更优雅的解决方案吗?
在此先感谢您,我写了一个片段来说明如何裁剪“绿色/蓝色”背景:
.page-banner {
background: grey;
width: 100%;
height: 300px;
background-position: top;
overflow: hidden;
}
.page-banner-text {
position: absolute;
background: #00525d8a;
padding-left: 100px;
width: 60%;
/* adjustments to snippet */
top: 10px;
left: 10px;
height: 300px;
/* this is the code for circle */
clip-path: circle(560px at left);
padding-right: 250px;
}
<div class="page-banner">
<div class="container">
<div class="page-banner-text">
<h1 class="block-title">Programs For Adults</h1>
<p>Programs to help children with disabilities in Western MA at all ages and levels of need.</p>
<div id="banner-donate-button"><a href="#" class="" target="_self" title="Donate">DONATE</a></div>
</div>
</div>
</div>
答案 0 :(得分:1)
根据我的评论,为什么不使用剪辑路径创建D(which is not supported very well),为什么不在div上使用边框半径。
* {
box-sizing: border-box;
}
.page-banner {
position: relative;
background: url(https://www.fillmurray.com/300/900) center center no-repeat;
background-size: cover;
width: 100%;
overflow: hidden; /* hide overflowing bits of circle */
min-height: 300px; /* just give enough height to fit text at smallest screen width size */
}
.circle {
background-color: rgba(50, 108, 116, 0.9); /* use rgba for transparent effect */
color: white;
transform: translate(-50%, -50%); /* move the circle left 50% of it's own width and up 50% of it's own height */
border-radius: 50%;
padding-top: 100%; /* this gives us a responsive square */
position: absolute;
top:50%; /* this vertically centers the circle */
left:0;
width:100%;
min-width:600px; /* this is the miniimum dimensions to allow circle to fill smaller screens */
min-height:600px;
}
.page-banner-text {
position: absolute; /* just positions the text on the right of the cirecle */
left: 50%;
top: 50%;
transform: translateY(-50%);
padding:2em;
width:40%;
}
<div class="page-banner">
<div class="circle">
<div class="page-banner-text">
<h1 class="block-title">Programs For Adults</h1>
<p>Programs to help children with disabilities in Western MA at all ages and levels of need.</p>
<div id="banner-donate-button"><a href="#" class="" target="_self" title="Donate">DONATE</a></div>
</div>
</div>
</div>
它具有响应能力的唯一问题是,随着屏幕变宽,D变得更平坦(随着半径的扩展),但是您可以通过在圆div上添加最大宽度和高度来解决此问题
答案 1 :(得分:0)
您可以简单地使用
border-radius
等于元素height
和width
的一半来实现position: relative
以top
和left
负值定位overflow: hidden
剪裁一个简单的实现:
#container {
height: 300px;
width: 100%;
background-color: gray;
overflow: hidden;
}
#circle {
height: 600px;
width: 600px;
background-color: rgba(0, 0, 255, 0.5);
position: relative;
top: -150px;
left: -375px;
}
<div id="container">
<div id="circle"></div>
</div>
答案 2 :(得分:0)
对于希望使用clip-path
属性解决此问题的任何人,您都可以使用ellipse
剪辑路径进行更多控制。使用OP提供的代码,我将椭圆替换为椭圆,然后切换为百分比以使响应感略佳。
clip-path:ellipse(67% 100% at 8% 50%);
前两个数字代表椭圆的高度和宽度。第一个数字越大,可见区域越宽。第二个数字越大,高度越宽。我们的目标是D形,因此可以通过调整第一个数字来使D或多或少突出。
这是后两个数字(定位)起作用的地方。 at 50% 50%
将其居中。通过调整第一个数字X的位置,我们可以将其移到需要的位置。弄清楚数字之后,您应该能够完全按照自己的意愿获得D。
.page-banner {
background: grey;
width: 100%;
height: 300px;
background-position: top;
overflow: hidden;
}
.page-banner-text {
position: absolute;
background: #00525d8a;
padding-left: 100px;
width: 60%;
/* adjustments to snippet */
top: 10px;
left: 10px;
height: 300px;
/* this is the code for circle */
clip-path: ellipse(67% 100% at 8% 50%);
padding-right: 250px;
}
<div class="page-banner">
<div class="container">
<div class="page-banner-text">
<h1 class="block-title">Programs For Adults</h1>
<p>Programs to help children with disabilities in Western MA at all ages and levels of need.</p>
<div id="banner-donate-button"><a href="#" class="" target="_self" title="Donate">DONATE</a></div>
</div>
</div>
</div>