如何使用css制作关键形状？

我想制作一个包含如下形状的html div：

在html表格中使用一些服装css，我可以在另一列中的矩形框旁边的一列上创建一个带有圆形化身的表格，但不能像上图那样使圆圈与矩形重叠

---

谢谢你的提示

您可以使用：pseudo元素来执行此操作

div{
位置：相对位置；
宽度：300px；
高度：75px；
背景：#B0B4FF；
利润率：25px0；
}
部门：之后{
位置：绝对位置；
内容：''；
宽度：125px；
高度：125px；
边界半径：50%；
背景：url(http://www.lorempixel.com/125/125);
顶部：-25px；
右：-25px；
}

---

这很好，但因为化身是动态呈现的（来自django模板）我不能在css中使用“background:url”。@hbsd-我可以向您展示如何使用JavaScript更改该url，或者您想在HTML中更改该url？我的首选答案是使用纯HTML/css，但如果您认为不可能，请详细说明js帮助的解决方案。