I have a div like this:

Now I need to remove a part of the circle from this shape which is shown as below:

Therefore the final shape would be looked like this:

So I decided to put the image as the background of my div.

<div >  
    <div >
        <div >
            <img src="https://sitename.com/images/image.png">   
        </div>
        <div >
            <h6 style="margin-top:5px;"><strong>Lorem Ipsum Dolor Simit</strong></h6>
            <hr style="margin-top:-5px;">
            <p style="margin-top:-10px;">012-3456789</p>
            <p style="padding-top:5px;">[email protected]</p>
        </div>
    </div>
</div> 

And here are the styles:

.mainInfo{
    background-color: #fff;
    border: .01rem round #e0e1ed;
    border-radius: 20px;
    color: #585CA1;
    width:100%;
    height:5em;
    box-shadow: 0px 0px 17px -5px rgba(0,0,0,0.75);
    margin-top: 3em;
    display: flex;
    align-items: center;
    justify-content: center;
}

.customBack{
    background-image: url("/img/shadow3.png") !important;
}

.circle2 {
    position: relative;
    left:-60%;
    width: 9em;
    height: 9em;
    background: #fff;
    border-radius: 50%;
    box-shadow: 0px 0px 17px -5px rgba(0,0,0,0.65);
}

.circle2 img {
    position: absolute;
    max-width: 85%;
    border-radius: 50%;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    z-index: 100;
}

.paraDivRight2 {
    position: absolute;
    display: inline-block;
    padding: 10px;
    color:black;
    top:0px !important;
    padding-top:50px !important;
    right: 20px;
    text-align: right;
    padding-right:50px !important;
}

.paraDivRight2 p {
    line-height: 1em;
    font-size: 10pt;
    margin: 0;
    letter-spacing: 1px;
}

As you can see I have put the background in .customBack class But the result is now looks like this:

So the question is, how can I properly place this background image which is (shadow3.png) as background image of this mainInfo div so the side of circle shape that needs to be removed, does not appear...

I'm really stuck with this, so please help me out...

CodePudding user response：

• Use CSS filter: drop-shadow() MDN Docs on a wrapper element.
• Fix your class naming to use a friendlier convention
• Use CSS flex for a simpler alignment of your elements
• Stop using inline HTML style attributes

/* Quick Reset */

* {
  margin: 0;
  box-sizing: border-box;
}

.custom {
  filter: drop-shadow(0 2px 5px rgba(0, 0, 0, 0.4));
  display: flex;
  align-items: center;
}

.custom-image {
  width: 9em;
  height: 9em;
  background: #fff;
  border-radius: 50%;
  padding: 1em;
}

.custom-image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: 50%;
}

.custom-content {
  position: relative;
  background: #fff;
  padding: 1em;
  text-align: right;
  border-radius: 0 1em 1em 0;
  padding-left: 2em;
  left: -1em;
}

.custom-content h4 {
  border-bottom: 1px solid #ddd;
}

<div >
  <div >
    <img src="https://i.stack.imgur.com/qCWYU.jpg?s=256&g=1">
  </div>
  <div >
    <h4>Lorem Ipsum Dolor Simit</h4>
    <p>012-3456789</p>
    <p>[email protected]</p>
  </div>
</div>

CodePudding user response：

I'm not 100% sure about this but it has worked for me in the past,try making the position attribute of the div relative and make it absolute for the image,then size it properly.