Build a rectangle frame with a transparent circle using CSS only

Question

I need to implement a design to my webpage butI am kind of newbie with CSS.

What I am trying is to add a frame above the user picture. For example, for any size of image, I want that a given profile image like:

enter image description here

... I want to add a rectangle with a transparent circle inside like: enter image description here

... so the final result would be like:

enter image description here

I am currently adding this frame as an image an resizing the user's image but it decreases resolution.

I really need the frame height size to be equal the image height size and put a frame and circle according to the user image.

Any Ideas?

for transparent circle you can also check out this question : http://stackoverflow.com/a/26481923/1811992 — web-tiki, Oct 31 '14 at 16:02

score 4 · Answer 1 · answered Mar 11 '14 at 18:28

Here try this DEMO. To check transparency, try changing body color.

<div class="outerCont">
    <div class="innerCont centerAlign">
        <img src="https://i.stack.imgur.com/FjDS6.png"/>
    </div>
</div>

.outerCont{
    height:300px;
    width:300px;
    position:relative;
    overflow:hidden;
}
.innerCont{
    background-color:transparent;
    border:150px solid rgb(186, 230, 255);
    border-radius:50%;
    height:200px;
    width:200px;
    overflow:hidden;
}
.innerCont img{
    position:absolute;
    height:80%;
    bottom:0;
    left:50%;
    -webkit-transform:translateX(-50%);
    transform:translateX(-50%);
}
.centerAlign{
    position:absolute;
    left:50%;
    top:50%;
    -webkit-transform:translateX(-50%) translateY(-50%);
    transform:translateX(-50%) translateY(-50%);
}

user3362165 · Accepted Answer · 2014-03-12T06:39:14.720

2

Well, there are 2 ways: 1) HTML:

<div class="profile_pic_cont">
   <img src="img/profile_pic.jpg" class="profile_pic" />
</div>

CSS:

.profile_pic_cont {
width: 100px;
height: 100px;
background-color: #d2e8f7; /* light blue */
padding: 5px;
}
.profile_pic {
border-radius: 9999px;
}

or 2) HTML:

<div class="profile_pic_cont">
   <img src="img/profile_pic_frame.png" />
</div>

CSS:

.profile_pic_cont {
width: 100px;
height: 100px;
background: #fff url('./img/profile_pic.jpg') no-repeat top left;

}

edited Mar 12 '14 at 06:39

answered Mar 11 '14 at 18:04

user3362165

106
2
11

Wouldn't create transparent background for image in both cases. – Lokesh Suthar Mar 11 '14 at 19:00
Although you didn't created the transparent background, it was the best and cleaner implementation. It gets to the same result but with less effort, Cheers matey! – marcelosalloum Mar 11 '14 at 21:29

Mehmet Eren Yener · Answer 3 · 2014-03-12T14:11:55.597

2

HERE IS THE JSFIDDLE

.circle {
    background-color:#fff;
    border-radius: 50%;
    width: 250px;
    height: 250px; 
    text-align:center;
    background-image:url('http://i.imgur.com/NGz1YlF.png');
    background-repeat:no-repeat;
    background-size:65%;
    background-position:center bottom;
}

edited Mar 12 '14 at 14:11

answered Mar 11 '14 at 18:07

Mehmet Eren Yener

2,006
1
23
37

But that is with white background and not transparent; – Lokesh Suthar Mar 11 '14 at 18:17
Giving it background with opacity 0 still wouldn't work. It would just show `background-color` for `.box` here [fiddle](http://jsfiddle.net/magnus16/nG8NF/3/) – Lokesh Suthar Mar 11 '14 at 18:58
exactly I was trying hard to solve it, do you have any soulution for this, because there are 3 layers, background, box and circle,I think I need to create a square with hole, but with the box model I dont how to create it without using image – Mehmet Eren Yener Mar 12 '14 at 14:11
Ha! but I guess OP didn't care for that anyway. – Lokesh Suthar Mar 12 '14 at 14:26

score 0 · Answer 4 · answered Mar 11 '14 at 18:04

0

You should draw the square, then the circle on top of it and finally put the image, this will produce the result you want.
Check there for how to trace a circle in CSS.

answered Mar 11 '14 at 18:04

Math

2,399
2
20
22

That's right but it wouldn't exactly create the results what he wants. – Lokesh Suthar Mar 11 '14 at 18:59

Build a rectangle frame with a transparent circle using CSS only

4 Answers4

Linked