CSS transparency hollow circle in corner of box

Question

I'm trying to hollow circle in the right bottom corner of a box.

This is what I want to do, but I don't know how to do this.

!

I tried using radial gradient but I cant position this like I want.

It actually works pretty well but only at the center

can you provide the code? – Lakindu Gunasekara Jan 06 '18 at 16:23 — Lakindu Gunasekara, Jan 06 '18 at 16:23

score 0 · Accepted Answer · answered Jan 06 '18 at 17:04

0

I am not sure to fully understand your question. Anyway is this what you want :

https://codepen.io/Scipionh/pen/XVzeQQ

Here is the css (in sass) :

.text {
  height: 200px;
  width: 100px;
  background-color: yellow;
  position: relative;
  &::after {
    content:'';
    border-radius: 100px;
    width: 20px;
    height: 20px;
    position: absolute;
    bottom: 0;
    right: 0;
    background-color: green;
  }
}

?

answered Jan 06 '18 at 17:04

Scipion

11,449
19
74
139

Have a look here https://stackoverflow.com/questions/8286550/transparent-hollow-or-cut-out-circle , you can achieve with box-shadow – Scipion Jan 06 '18 at 17:30

Lakindu Gunasekara · Answer 2 · 2018-01-06T17:52:02.397

Try this snippet.

body {
  background-color: #434448;
  height: 100vh;
  font-size: 16px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.test {
  position: relative;
  width: 240px;
  height: 480px;
  background: #fff;
  border-radius: 10px;
  overflow: hidden;
  padding: 0 1.25rem
}

.box {
  position: absolute;
  top: 0.5rem;
  left: 0.5rem;
  right: 0.5rem;
  bottom: 0.5rem;
  border-radius: 10px;
}

.corner {
  top: 0;
  left: 0;
  position: absolute;
  width: 100%;
  height: 100%;
  background: -moz-radial-gradient(center, circle, transparent 20px, rgba(255, 0, 0) 20px);
}

.inner {
  position: absolute;
  right: 0px;
  bottom: 0px;
}

#circle {
  width: 60px;
  height: 60px;
  -webkit-border-radius: 30px;
  -moz-border-radius: 30px;
  border-radius: 30px;
  background-color: #E0E0E0;
  opacity: .9;
}

<div class="test">
  <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor
    in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
  <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor
    in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
  <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor
    in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
  <div class="box">
    <div class="corner">
      <div class="inner">
        <div id="circle">
          <img src="http://www.clker.com/cliparts/O/3/O/G/7/D/green-circle-md.png" height="50px" width="50px" style="margin-left:0.25rem; margin-top:0.25rem">
        </div>
      </div>

    </div>
  </div>
  <div>

This is the core of positioning.

 .inner{
    position: absolute;
    right: 0px;
    bottom: 0px;

    }

Edited with an image

body {
  background-color: #434448;
  height: 100vh;
  font-size: 16px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.test {
  position: relative;
  width: 240px;
  height: 480px;
  background: #fff;
  border-radius: 10px;
  overflow: hidden;
  padding: 0 1.25rem
}

.box {
  position: absolute;
  top: 0.5rem;
  left: 0.5rem;
  right: 0.5rem;
  bottom: 0.5rem;
  border-radius: 10px;
}

.corner {
  top: 0;
  left: 0;
  position: absolute;
  width: 100%;
  height: 100%;
  background: -moz-radial-gradient(center, circle, transparent 20px, rgba(0, 0, 0, 1) 20px);
}

.inner {
  position: absolute;
  right: 0px;
  bottom: 0px;
}

<div class="test">
  <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor
    in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
  <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor
    in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
  <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor
    in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
  <div class="box">
    <div class="corner">
      <div class="inner">
        <img src="http://www.clker.com/cliparts/O/3/O/G/7/D/green-circle-md.png" height="50px" width="50px">
      </div>

    </div>
  </div>
  <div>

It does the trick, but that should really be simpler, it's an overkill here — Scipion, Jan 06 '18 at 17:05
it is because, i have drawn a circle in the code it self, you can replace it with any image or icon — Lakindu Gunasekara, Jan 06 '18 at 17:06
.inner section is the place where you put the positions, i edited the answer, to highlight what is needed. Circle is just for demo purpose, you can replace anything there, it will be under "inner" class. So position will work — Lakindu Gunasekara, Jan 06 '18 at 17:09
I added an image, check "Edited with an image" section. Hope if simplified — Lakindu Gunasekara, Jan 06 '18 at 17:13
Do you have any picture of the exact thing you want? I didn't get it, Because i was referring to https://i.stack.imgur.com/GRi3P.png picture — Lakindu Gunasekara, Jan 06 '18 at 17:24

CSS transparency hollow circle in corner of box

2 Answers2