偏移到右下角的较大圆圈内的小圆圈切口 Bootstrap

Question

我在 JavaScript 中创建了一个图像数组，并且在使用拆分的页面上的图像行中（这是有原因的），该行中的所有图像都被圈起来，看起来像这样

但我需要在较大圆圈的右下角添加一个较小的圆形切口以展示较小的图像，这就是它的样子

我不知道有人可以帮忙吗？

我的圆圈的 JavaScript 和引导代码如下。

引导

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

带有分割的Javascript图像数组

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>'
    )
  }
}

Answer 1

我不确定引导程序的内容，但从概念上讲，您需要做的就是为较小的圆圈添加一个额外的元素。如果它与背景具有相同的边框颜色，即使技术上没有，它也会呈现出被剪掉的外观。

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>