Drawing a shape with CSS

Question

I am not sure if it is possible as such by im wanting a particular shape as shown in the image below in CSS.

shape cutaway

Any help would be appreciated

enter image description here

You will need masking http://www.html5rocks.com/en/tutorials/masking/adobe/ — Mr. Alien, Jul 21 '14 at 09:43
Down votes are probably due to the fact there is no code to work with and no demonstrated attempt to solve the problem yourself. BTW I didn't down vote. — Jon P, Jul 21 '14 at 09:50
I personally though an image tells 1000 words, im lost in css i was aware of uing two divs , but same issue i had where the cutaway was not transparent.. thanks for your feed back i hoped people who down vote share there's as one more down vote i can longer use this service — Careen, Jul 21 '14 at 09:54
Actually [this thread](http://stackoverflow.com/questions/8503636/transparent-half-circle-cut-out-of-a-div) is your best friend. Some really amazing examples for cutting out a circular bit. Refer web-tiki's answer there. It also seems to be responsive. — Harry, Jul 21 '14 at 10:05
excellent thanks for the find, exactly what i was looking for but i wasn't to sure how to search for it... Thanks again — Careen, Jul 21 '14 at 13:31

score 5 · Accepted Answer · edited Jun 20 '20 at 09:12

5

Circle with White Background:

Yes, you can do with below code. All we are doing is creating a rectangular box with the div and positioning a circular box (using :before and border-radius) on top of it on the left side.

HTML:

<div class='shape'></div>

CSS:

.shape{
    height: 100px; /* height of rectangular area */
    width: 200px; /* width of rectangular area */
    background: red;
    margin-left: 50px; /* Just for demo */
}
.shape:before{
    position: absolute;
    content: '';
    height: 100px; /* equal to height of box */
    width: 100px; /* equal to height of box because we need a circle */
    background: white;
    border-radius: 50px; /* 50% of height/width to make a circle */
    margin-left: -50px; /* equal to border-radius to move it left by that much */
}

Demo

Circle with Transparent Background (Using Pseudo Element):

HTML:

<div class='container'>
    <span class='shape'></span>
</div>

CSS:

.container{
    height: 100px;
    width: 100px;
    background:red;
    position:relative;
    margin-top:100px;
    margin-left:100px;
}
.shape{
    width: 50px;
    height: 100px;
    top:0px;
    left:-50px;
    overflow:hidden;
    position:absolute;
}
.shape:after{
    content:'';
    width: 100px;
    height: 100px;
    border-radius: 100px;
    background:rgba(0,0,0,0);
    position:absolute;
    top:-40px;
    left:-90px;
    border:40px solid red;
}

Demo

Circle with Transparent Background (Using Box Shadow):

(Courtesy King King)

CSS:

div {
    width:300px;
    height:200px;
    overflow:hidden;
    position:relative;
    left:100px;
    top:50px;
}
div:before {
    content:'';
    position:absolute;
    top:0;
    left:-100px; /* should be equal to height */
    height:100%;
    width:200px;/* should be equal to height */
    border-radius:50%;
    box-shadow:0 0 0 1000px red;    
}

Demo

Extra Sample: For additional samples, refer this thread.

edited Jun 20 '20 at 09:12

Community

1
1

answered Jul 21 '14 at 09:21

Harry

87,580
25
202
214

this shape is two colours, it has a rectangle with a white circle, setting to transparent i see the rectangle: – Careen Jul 21 '14 at 09:30
i updated the question to be clearer, i dont think its possible with css – Careen Jul 21 '14 at 09:43
either way i will choose your answer if cant solve, as you were first to respond... – Careen Jul 21 '14 at 09:45
@Careen: That or masking as Mr Alien mentioned in the Question's comments seem to be the best. But a rough solution can be done with CSS. – Harry Jul 21 '14 at 09:54
cool, thanks for your time an effort, im rendering webgl in the bg behing this shape...hence the transparency. plus ++ – Careen Jul 21 '14 at 09:56
@Careen: Have a look at [this](http://jsfiddle.net/yuf5W/1/). Closest I could get. But I wouldn't recommend doing this with CSS if you need transparent background. – Harry Jul 21 '14 at 09:57
1

@Harry that solution is totally acceptable with a pure CSS solution. In fact it can be made simpler like this (run on webkit) http://jsfiddle.net/yuf5W/2/ . That approach is very similar to the use of `box-shadow`, which can even make it simpler (due to not using tramsform) like in this http://jsfiddle.net/47r4f/ – King King Jul 21 '14 at 10:12
1

@KingKing, These are 100% perfect, i really do appreciate the effort guys. – Careen Jul 22 '14 at 01:27

score 2 · Answer 2 · answered Jul 21 '14 at 09:22

2

Simply use a border-radius on a nested child element. There is nothing to explain as the code is pretty easy, so I think you will figure it out, speaking about this line which is important - border-radius: 0 50% 50% 0; is a short hand where the values of top-right and bottom-right are set to 50%

Demo

.wrap {
    background: #CC0001;
    height: 200px;
    width: 600px;
}

.wrap .inner {
    height: 200px;
    width: 200px;
    background: #fff;
    border-radius: 0 50% 50% 0;
}

answered Jul 21 '14 at 09:22

Mr. Alien

153,751
34
298
278

is this responsive if i scale the parent div ? also +1 for your answer – Careen Jul 21 '14 at 09:27
@Careen just use `%` instead of `px` if you want to make it responsive :) and the circle will always be round as am using `%` for that.. – Mr. Alien Jul 21 '14 at 09:28
you can also float the circle to the left so that you can place the content at the right – Mr. Alien Jul 21 '14 at 09:29

score 1 · Answer 3 · answered Jul 21 '14 at 09:27

1

You could use two divs, one rectangle red one and another white one overlayed with css border-radius 100%

Boder-radius W3School

answered Jul 21 '14 at 09:27

minychillo

395
4
17

Drawing a shape with CSS

3 Answers3

Circle with White Background:

Circle with Transparent Background (Using Pseudo Element):

Circle with Transparent Background (Using Box Shadow):