placing a circle on a picture I have in my css-CodePudding

.circle{

    height: 150px;
    width: 150px;
    border-radius: 50%;
    background: black;
    line-height: 0;
    position: absolute;
    right:-20px; top:-2px;
    z-index: 2;
}
.circle:after {
    content: "";
    display: block;
    padding-bottom: 100%;
    position: relative;
    
    
  }
.circle-txt {
    /* (E1) CENTER TEXT IN CIRCLE */
    position: absolute;
    bottom: 50%;
    width: 100%;
    text-align: center;
   
    /* (E2) THE FONT - NOT REALLY IMPORTANT */
    font-family: "font";
    font-size:inherit;
    
  }

:root{
    --pic:"M510.295 108.139C571.169 177.774 609.697 279.36 589.662 365.38C570.398 451.399 492.572 521.854 409.352 555.443C326.132 589.031 236.748 586.574 162.775 548.889C88.8013 511.204 30.2391 438.292 8.66355 353.91C-12.1414 268.71 4.81077 171.22 56.438 104.043C107.295 36.8656 193.597 0 278.358 0C363.89 0.819237 448.651 38.5041 510.295 108.139Z"
}
.frame{
    padding-right: 1px;
    height: 579px;
    width: 595px;
    clip-path: path(var(--pic));
    margin-left: 8%;
    margin-bottom: 5%;
    position: relative;
    z-index: 1;
    
    
}
img{
    height: 579px;
    width: 595px;
}

<div class="frame">
    <img src="1.png">
    <div class="circle">
        <div class="circle-txt">فریلنسینگ چیست؟</div>
    </div>
</div>

I'm trying to put a circle on the corner of a frame like the picture but only the part of the circle that's inside of the frame can be seen. the part that i marked with x is invisible. i would appreciate if anyone can tell me what is that I'm doing wrong.

how it looks how i want it to look

CodePudding user response：

From your description and images shared, it seems you maybe using border-radius around the entire set of elements, which is cutting off the smaller top right hand side circle.

Here is a solution you can use.

HTML:

<div class="circle-wrapper"> 
    <div class="big-circle"></div>
    <div class="little-circle"></div>
<div class="circle-wrapper">

CSS:

.circle-wrapper { position: relative; width: 24px; height: 24px; }
.big-circle { width: 24px; height: 24px; background: red; border-radius: 24px; }
.little-circle { position: absolute; width: 12px; height: 12px; background: blue; border-radius: 12px; top: -6px; right: -6px; }

CodePudding user response：

Use border-radius to allow overflowing content to be seen, clip-path cuts it out ;) (or use it on img itself if that's good enough)

possible example.

.circle{

    height: 150px;
    width: 150px;
    border-radius: 50%;
    background: black;
    line-height: 0;
    position: absolute;
    right:-20px; top:-2px;
    z-index: 2;
}
.circle:after {
    content: "";
    display: block;
    padding-bottom: 100%;
    position: relative;
    
    
  }
.circle-txt {
    /* (E1) CENTER TEXT IN CIRCLE */
    position: absolute;
    bottom: 50%;
    width: 100%;
    text-align: center;
   
    /* (E2) THE FONT - NOT REALLY IMPORTANT */
    font-family: "font";
    font-size:inherit;
    color:hotpink;
    
  }

:root{
    --pic:"M510.295 108.139C571.169 177.774 609.697 279.36 589.662 365.38C570.398 451.399 492.572 521.854 409.352 555.443C326.132 589.031 236.748 586.574 162.775 548.889C88.8013 511.204 30.2391 438.292 8.66355 353.91C-12.1414 268.71 4.81077 171.22 56.438 104.043C107.295 36.8656 193.597 0 278.358 0C363.89 0.819237 448.651 38.5041 510.295 108.139Z"
}
.frame{
    padding-right: 1px;
    height: 579px;
    width: 595px;
    /*clip-path: path(var(--pic));*/
    margin-left: 8%;
    margin-bottom: 5%;
    position: relative;
    z-index: 1;
    border-radius:50%;
    border:solid;
    
    
}
img{
    height: 579px;
    width: 595px;
    border-radius:50%;
    background:hotpink;
}

<div class="frame">
    <img src="1.png">
    <div class="circle">
        <div class="circle-txt"> فریلنسینگ چیست؟ </div>
    </div>
</div>

CodePudding user response：

Check out my solution.

.circle {
    height: 150px;
    width: 150px;
    border-radius: 50%;
    background: black;
    line-height: 0;
    position: absolute;
    right: 30px;
    top: 38px;
    z-index: 2;
}

.wrapp {
    height: 579px;
    width: 595px;
    margin-left: 8%;
    margin-bottom: 5%;
    position: relative;
}

.frame {
    clip-path: path(var(--pic));
}

img {
    height: 579px;
    width: 595px;
    background: red;
}
.circle:after {
    content: "";
    display: block;
    padding-bottom: 100%;
    position: relative;
    
    
  }
.circle-txt {
    /* (E1) CENTER TEXT IN CIRCLE */
    position: absolute;
    bottom: 50%;
    width: 100%;
    text-align: center;
    color:#fff;
    /* (E2) THE FONT - NOT REALLY IMPORTANT */
    font-family: "font";
    font-size:inherit;
    
  }

:root{
    --pic:"M510.295 108.139C571.169 177.774 609.697 279.36 589.662 365.38C570.398 451.399 492.572 521.854 409.352 555.443C326.132 589.031 236.748 586.574 162.775 548.889C88.8013 511.204 30.2391 438.292 8.66355 353.91C-12.1414 268.71 4.81077 171.22 56.438 104.043C107.295 36.8656 193.597 0 278.358 0C363.89 0.819237 448.651 38.5041 510.295 108.139Z"
}

  <div class="wrapp">
        <div class="circle">
          <div class="circle-txt">فریلنسینگ چیست؟</div>
        </div>
        <div class="frame">
          <img src="1.png" />
        </div>
  </div>