Small Circle cutout within a bigger circle thats offset to the bottom right Bootstrap

问题

I created an image array in JavaScript and is in an image row on the page that uses split (there is a reason for it), all the images in the row is circled and looks like this

but I need to add a smaller circle cutout in the bottom right of the bigger circle to showcase a smaller image this is how it should look like

I can't figure it out could anyone please assist?

My JavaScript and bootstrap code for the circles is as follows.

Bootstrap

<div class="row" id="partner_row"></div>

Javascript image array with split

let image_arr = [{
    id: 'part_1',
    image_src: '../assets/partner1.jpg',
    h6_tag: 'Bradley Hunter',
    p_tag: 'Based in Chicago. I love playing tennis and loud music.',
  },
  {
    id: 'part_2',
    image_src: '../assets/partner2.jpg',
    h6_tag: 'Marie Bennet',
    p_tag: 'Currently living in Colorado. Lover of art, languages and travelling.',
  },
  {
    id: 'part_3',
    image_src: '../assets/partner3.jpg',
    h6_tag: 'Diana Wells',
    p_tag: 'Living in Athens, Greece. I love black and white classics, chillout music green tea.',
  },
  {
    id: 'part_4',
    image_src: '../assets/partner4.jpg',
    h6_tag: 'Christopher Pierce',
    p_tag: 'Star Wars fanatic. I have a persistent enthusiasm to create new things.',
  },
];

$(document).ready(function () {
  // create
  createPartnerRow(image_arr);
  // set image background
})

$(document).ready(function () {
  $("[id^=part_]").hover(function (image_arr) {
      $(this).addClass('border')
    },
    function () {

    });
});

$("[id^=part_]").ready(function () {
  $("[id^=part_]").click(function () {
    $(this).removeClass('border')
    // set value
    var current_partner = image_arr[0];
    // remove first element from array
    image_arr = image_arr.splice(1, 4);
    // append current_partner to end of array
    image_arr.push(current_partner);
    // clear the row of all partners;
    $('#part_1, #part_2, #part_3, #part_4').remove();
    // recreate row
    console.log(image_arr);
    createPartnerRow(image_arr);
  });
})


function createPartnerRow(image_arr) {
  for (i = 0; i < image_arr.length; i++) {
    $('#partner_row').append(
      '<div class="col-md-3 col-sm-6 p-3" id="' + image_arr[i].id + '">' +
      '<button class="border-0 bg-white">' +
      '<img class="rounded-circle img-fluid mx-auto d-block" src="' + image_arr[i].image_src + '"' + '/>' +
      '<h6 class="text-center g-mt-50 font-weight-bold pt-2">' + image_arr[i].h6_tag + '</h6>' +
      '<p class="text-center g-mt-50 pt-2">' + image_arr[i].p_tag + '</p>' +
      '</button>' +
      '</div>'
    )
  }
}

回答1:

I'm not sure about the bootstrap stuff but conceptually all you need to do is add an extra element for the smaller circle. If this has the same border colour as the background it will give the appearance of being cut-out even though its technically not.

let image_arr = [{
    id: 'part_1',
    image_src: 'http://placeimg.com/100/100/animals?t=1570040444517',
    h6_tag: 'Bradley Hunter',
    p_tag: 'Based in Chicago. I love playing tennis and loud music.',
    pin: 'a',
  },
  {
    id: 'part_2',
    image_src: 'http://placeimg.com/100/100/animals?t=1570040444516',
    h6_tag: 'Marie Bennet',
    p_tag: 'Currently living in Colorado. Lover of art, languages and travelling.',
    pin: 'b',
  },
  {
    id: 'part_3',
    image_src: 'http://placeimg.com/100/100/animals?t=1570040444515',
    h6_tag: 'Diana Wells',
    p_tag: 'Living in Athens, Greece. I love black and white classics, chillout music green tea.',
    pin: 'c',
  },
  {
    id: 'part_4',
    image_src: 'http://placeimg.com/100/100/animals?t=1570040444514',
    h6_tag: 'Christopher Pierce',
    p_tag: 'Star Wars fanatic. I have a persistent enthusiasm to create new things.',
    pin: 'd',
  },
];

$(document).ready(function () {
  // create
  createPartnerRow(image_arr);
  // set image background
})

$(document).ready(function () {
  $("[id^=part_]").hover(function (image_arr) {
      $(this).addClass('border')
    },
    function () {

    });
});

$("[id^=part_]").ready(function () {
  $("[id^=part_]").click(function () {
    $(this).removeClass('border')
    // set value
    var current_partner = image_arr[0];
    // remove first element from array
    image_arr = image_arr.splice(1, 4);
    // append current_partner to end of array
    image_arr.push(current_partner);
    // clear the row of all partners;
    $('#part_1, #part_2, #part_3, #part_4').remove();
    // recreate row
    console.log(image_arr);
    createPartnerRow(image_arr);
  });
})


function createPartnerRow(image_arr) {
  for (i = 0; i < image_arr.length; i++) {
    $('#partner_row').append(
      '<div class="col-md-3 col-sm-6 p-3" id="' + image_arr[i].id + '">' +
      '<button class="border-0 bg-white">' +
      '<div class="facebox"><img class="rounded-circle img-fluid mx-auto d-block" src="' + image_arr[i].image_src + '"' + '/><span class="pin">' + image_arr[i].pin + '</span></div>' +
      '<h6 class="text-center g-mt-50 font-weight-bold pt-2">' + image_arr[i].h6_tag + '</h6>' +
      '<p class="text-center g-mt-50 pt-2">' + image_arr[i].p_tag + '</p>' +
      '</button>' +
      '</div>'
    )
  }
}

#partner_row {display:flex;}
.bg-white {background: transparent;}
.facebox{
position:relative;
display:inline-block; margin:auto;
width:80px; font-size:0;
}
.facebox .rounded-circle{
width:100%; border-radius:50%;
}
.facebox .pin {
display:block;
width:22px;
height:22px;
border:3px solid white;
border-radius:50%;
background:blue;
position:absolute;
bottom:-3px;
right:-3px;
  color:white; text-align:center; font-size:13px; line-height:20px;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="row" id="partner_row"></div>

来源：https://stackoverflow.com/questions/58206703/small-circle-cutout-within-a-bigger-circle-thats-offset-to-the-bottom-right-boot