मेरे पास इस तरह एक div है:

enter image description here

अब मुझे इस आकृति से वृत्त के एक भाग को हटाने की आवश्यकता है जो नीचे दिखाया गया है:

enter image description here

इसलिए अंतिम आकार इस तरह दिखेगा:

enter image description here

इसलिए मैंने छवि को अपने div की पृष्ठभूमि के रूप में रखने का निर्णय लिया।

<div class="col-4 customBack">  
    <div class="mainInfo">
        <div class="circle2">
            <img src="https://sitename.com/images/image.png">   
        </div>
        <div class="paraDivRight2">
            <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;">ifno@sitename.com</p>
        </div>
    </div>
</div> 

और यहाँ शैलियाँ हैं:

.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;
}

जैसा कि आप देख सकते हैं कि मैंने पृष्ठभूमि को .customBack कक्षा में रखा है, लेकिन परिणाम अब इस तरह दिखता है:

enter image description here

तो सवाल यह है कि, मैं इस पृष्ठभूमि छवि को कैसे ठीक से रख सकता हूं जो (shadow3.png) इस mainInfo div की पृष्ठभूमि छवि के रूप में है, इसलिए सर्कल आकार के किनारे को हटाने की जरूरत है, प्रकट नहीं होता है .. .

मैं वास्तव में इसके साथ फंस गया हूं, इसलिए कृपया मेरी मदद करें ...

1
nagidi 25 पद 2021, 11:57

2 जवाब

सबसे बढ़िया उत्तर
  • एक रैपर पर CSS filter: drop-shadow() MDN Docs का इस्तेमाल करें तत्व।
  • मित्र सम्मेलन का उपयोग करने के लिए अपनी कक्षा का नामकरण ठीक करें
  • अपने तत्वों के सरल संरेखण के लिए CSS फ्लेक्स का उपयोग करें
  • इनलाइन एचटीएमएल style एट्रिब्यूट का इस्तेमाल बंद करें
/* 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 class="custom">
  <div class="custom-image">
    <img src="https://i.stack.imgur.com/qCWYU.jpg?s=256&g=1">
  </div>
  <div class="custom-content">
    <h4>Lorem Ipsum Dolor Simit</h4>
    <p>012-3456789</p>
    <p>ifno@sitename.com</p>
  </div>
</div>
2
Roko C. Buljan 25 पद 2021, 12:09

मैं इसके बारे में 100% निश्चित नहीं हूं, लेकिन इसने मेरे लिए अतीत में काम किया है, div सापेक्ष की position विशेषता बनाने का प्रयास करें और इसे छवि के लिए पूर्ण बनाएं, फिर इसे ठीक से आकार दें।

-2
thenetwork 25 पद 2021, 12:10