Javascript 大圆圈内的小圆圈切口，该圆圈偏移至右下引导

我用JavaScript创建了一个图像数组，它位于使用split的页面上的一个图像行中（这是有原因的），该行中的所有图像都被圈起来，如下所示

但我需要在大圆圈的右下角添加一个小圆圈，以展示一个较小的图像。这就是它的外观

我想不出来谁能帮忙吗

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

let image\u arr=[{
id:“第1部分”，
图像_src:“../assets/partner1.jpg”，
h6_标签：“布拉德利猎人”，
p_tag：“总部设在芝加哥。我喜欢打网球和大声的音乐。”，
},
{
id:“第2部分”，
图像_src:“../assets/partner2.jpg”，
h6_标签：“玛丽·班纳特”，
p_tag：“目前居住在科罗拉多州。热爱艺术、语言和旅游。”，
},
{
id:“第三部分”，
图像_src:“../assets/partner3.jpg”，
h6_标签：“戴安娜·威尔斯”，
p_tag:“住在希腊雅典。我喜欢黑白古典音乐、清凉音乐和绿茶。”，
},
{
id:“第四部分”，
图像_src:“../assets/partner4.jpg”，
h6_标签：“克里斯托弗·皮尔斯”，
佩塔格：“星球大战狂热分子。我对创造新事物有着持久的热情。”，
},
];
$（文档）.ready（函数（）{
//创造
createPartnerRow（图像_arr）；
//设置图像背景
})
$（文档）.ready（函数（）{
$（“[id^=part_]”）。悬停（函数（image_arr）{
$（this.addClass（'border'））
},
函数（）{
});
});
$（“[id^=part_389;]”）.ready（函数（）{
$（“[id^=part_]”。单击（函数（）{
$（this.removeClass（'border'））
//设定值
var current_partner=image_arr[0]；
//从数组中删除第一个元素
图像拼接=图像拼接（1,4）；
//将当前_伙伴追加到数组末尾
镜像到达推送（当前伙伴）；
//清除所有合作伙伴的行；
$（“#第1部分，#第2部分，#第3部分，#第4部分”）。删除（）；
//重新创建行
控制台日志（图像_arr）；
createPartnerRow（图像_arr）；
});
})
函数createPartnerRow（图像\u arr）{
对于（i=0；i”+image\u arr[i].p\u tag+”
'+
'' +
''
)
}
}

我不确定引导的内容，但从概念上讲，您需要做的就是为较小的圆添加一个额外的元素。如果它的边框颜色与背景颜色相同，那么即使从技术上讲不是，它也会给人一种被剪掉的感觉

let image\u arr=[{
id:“第1部分”，
图像_src:'http://placeimg.com/100/100/animals?t=1570040444517',
h6_标签：“布拉德利猎人”，
p_tag：“总部设在芝加哥。我喜欢打网球和大声的音乐。”，
别针：“a”，
},
{
id:“第2部分”，
图像_src:'http://placeimg.com/100/100/animals?t=1570040444516',
h6_标签：“玛丽·班纳特”，
p_tag：“目前居住在科罗拉多州。热爱艺术、语言和旅游。”，
别针：‘b’，
},
{
id:“第三部分”，
图像_src:'http://placeimg.com/100/100/animals?t=1570040444515',
h6_标签：“戴安娜·威尔斯”，
p_tag:“住在希腊雅典。我喜欢黑白古典音乐、清凉音乐和绿茶。”，
别针：‘c’，
},
{
id:“第四部分”，
图像_src:'http://placeimg.com/100/100/animals?t=1570040444514',
h6_标签：“克里斯托弗·皮尔斯”，
佩塔格：“星球大战狂热分子。我对创造新事物有着持久的热情。”，
别针：“d”，
},
];
$（文档）.ready（函数（）{
//创造
createPartnerRow（图像_arr）；
//设置图像背景
})
$（文档）.ready（函数（）{
$（“[id^=part_]”）。悬停（函数（image_arr）{
$（this.addClass（'border'））
},
函数（）{
});
});
$（“[id^=part_389;]”）.ready（函数（）{
$（“[id^=part_]”。单击（函数（）{
$（this.removeClass（'border'））
//设定值
var current_partner=image_arr[0]；
//从数组中删除第一个元素
图像拼接=图像拼接（1,4）；
//将当前_伙伴追加到数组末尾
镜像到达推送（当前伙伴）；
//清除所有合作伙伴的行；
$（“#第1部分，#第2部分，#第3部分，#第4部分”）。删除（）；
//重新创建行
控制台日志（图像_arr）；
createPartnerRow（图像_arr）；
});
})
函数createPartnerRow（图像\u arr）{
对于（i=0；i”+image\u arr[i].p\u tag+”
'+
'' +
''
)
}
}

#合作伙伴_行{display:flex；}
.bg白色{背景：透明；}
.脸谱盒{
位置：相对位置；
显示：内联块；边距：自动；
宽度：80px；字体大小：0；
}
.脸谱盒.圆形{
宽度：100%；边界半径：50%；
}
.facebox.pin{
显示：块；
宽度：22px；
高度：22px；
边框：3倍纯白；
边界半径：50%；
背景：蓝色；
位置：绝对位置；
底部：-3px；
右：-3px；
颜色：白色；文本对齐：居中；字体大小：13px；行高：20px；
}

---

我不确定引导的内容，但从概念上讲，您需要做的就是为较小的圆添加一个额外的元素。如果它的边框颜色与背景颜色相同，那么即使从技术上讲不是，它也会给人一种被剪掉的感觉

let image\u arr=[{
id:“第1部分”，
图像_src:'http://placeimg.com/100/100/animals?t=1570040444517',
h6_标签：“布拉德利猎人”，
p_tag：“总部设在芝加哥。我喜欢打网球和大声的音乐。”，
别针：“a”，
},
{
id:“第2部分”，
图像_src:'http://placeimg.com/100/100/animals?t=1570040444516',
h6_标签：“玛丽·班纳特”，
p_tag：“目前居住在科罗拉多州。热爱艺术、语言和旅游。”，
别针：‘b’，
},
{
id:“第三部分”，
图像_src:'http://placeimg.