How to make a clipped half circle (D shape) using CSS? - css

Question

I need help understanding clip-path CSS property in order to make my version of a clipped circle below...
More like the design version:
If you can see on the grey background, my circle appears a lot larger and less round when it's clipped.
What can I do to make a more round circle? My ideas were:
Use clip-path as in the snippet below
Use a pseudo :after element or a right border with radius
Cut a circle image from photoshop and use it as a background image.
Preferably, I'd like to avoid using a background image. However, I need to keep responsiveness in mind as the circle cannot change shapes drastically as we resize the window.
Is clip-path the right way to go? Can someone suggest a simpler and elegant solution with another way using CSS?
Thank you in advance, here's a snippet I wrote that illustrates how I clipped the "green/blue" background:
.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">DONATE</div>
</div>
</div>
</div>

Answer 1

Per my comment, instead of using clip path to create your D (which is not supported very well), why not use border radius on your 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">DONATE</div>
</div>
</div>
</div>
The only problem with it being responsive though is that as the screen gets wider, the D gets flatter (as the radius extends), but you can combat this by adding a max width and height to the circle div

Answer 2

To anyone looking to solve this with the clip-path property, you have a bit more control with the ellipse clip path. Using the code provided by the OP, I replaced circle with ellipse, and switched to percentages to allow for a slightly better responsive feel.
clip-path:ellipse(67% 100% at 8% 50%);
The first two numbers represent the height and width of the ellipse. The larger the first number, the wider the visible area is. The larger the second number, the wider the height. We're aiming for a D shape, so by adjusting the first number, we can make the D more or less prominent.
This is where the second two numbers, the positioning, comes into play. at 50% 50% centers it. By adjusting the first number, the X positioning, we can move it over where need fit . After playing around with the numbers, you should be able to get the D exactly how you'd like.
.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">DONATE</div>
</div>
</div>
</div>

Answer 3

You could simply use
an inner circle element, which you can achieve with a border-radius equal to half the element's height and width
positioned via position: relative with negative top and left values
inside of an outer bounding box, clipped via overflow: hidden
A simple implementation:
#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>