Html 如何在圆形图像上设置此三角形的样式？

我在我的项目中使用Bootstrap3.3，我想用CSS设计照片的样式。请指导我如何才能做到这一点

预览（我需要的）：

使用它：-

<img class="img-circle box-shad" alt="" src="http://placehold.it/140x140">

---

真正的答案是由Irvin给出的你需要使用两个图像来表示

三角形和
圆形，你可以使用
背景图像
，或者你可以使用
img
，并根据
位置：绝对
，在下面的示例中，我使用了
背景img


div{
宽度：100px；
高度：100px；
边框：2个实心rgb（199206212）；
边界半径：50%；
位置：相对位置；
背景：url(http://i745.photobucket.com/albums/xx93/ily_cin/DSC03085.jpg)左下无重复；
背景尺寸：封面；
盒影：4px44px14px0pxRGBA（50,50,50,0.75）；
}
部门：之后{
内容：''；
位置：绝对位置；
底部：2px；
右：6px；
宽度：20px；
高度：20px；
背景：url(http://i745.photobucket.com/albums/xx93/ily_cin/DSC03085.jpg)不重复；
背景位置：-71px-77px；
边框宽度：0 2px 2px 0；
边框样式：实心；
边框颜色：rgb（199206212）；
盒影：9px 9px 12px 0px rgba（50,50,50,0.41）；
}
您可以使用
svg
的
clipPath
和
过滤器
为
框阴影
执行此操作


使用圆上坐标的公式计算三角形的坐标：

（x，y）=（r×cos（θ），r×sin（θ））
其中，
r
是圆的半径，
θ
是角度

假设不在圆上的坐标是半径为
55px
的圆上的坐标，该半径大于原始圆的半径（
50px
）


完整解释：

我最喜欢的部分-数学：
我知道那个图像循环，但我需要那个尾端样式，如果我使用这个代码，我必须在一个块中显示多个图像。我在这里看到id的形状，boxshadow，sourceGraphic都是重复的。所以这不是问题，对吗？@veblearner-我将向您展示如何显示多个图像。太好了！这对我有帮助。谢谢
.box-shad {
    -webkit-box-shadow: 7px 7px 5px 0px rgba(50, 50, 50, 0.75);
    -moz-box-shadow: 7px 7px 5px 0px rgba(50, 50, 50, 0.75);
    box-shadow: 7px 7px 5px 0px rgba(50, 50, 50, 0.75);
}


(x1, y1) = (ra × cos(θ), ra × sin(θ))
         = (50px × cos(30°), 50px × sin(30°))
         = (43.30px, 25px)

(a1, b1) = (rb × cos(θ), rb × sin(θ))
         = (55px × cos(40°), 55px × sin(40°))
         = (42.13px, 35.35px)

(x2, y2) = (ra × cos(θ), ra × sin(θ))
         = (50px × cos(50°), 50px × sin(50°))
         = (32.14px, 38.30px)

######################################################################################################
##                                                                                                  ##
## At this point, these co-ordinates' origin is the center of the circle, but we need it to be the  ##
## top left corner, so we add the radius of the circle to the co-ordinates as well.                 ##
##                                                                                                  ##
######################################################################################################

(ra + x1, ra + y1) = (50px + 43.30px, 50px + 25px)    = (93.30px, 75px)
(rb + a1, rb + b1) = (55px + 42.13px, 55px + 35.35px) = (97.13px, 90.35px)
(ra + x2, ra + y2) = (50px + 32.14px, 50px + 38.30px) = (82.14px, 88.30px)