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

Question

我在我的项目中使用bootstrap 3.3,我想用CSS设置样式.请指导我怎么做到这一点？

预览(我需要的):

Answer 1

你可以用svg's clipPath和filters 来做box-shadow.

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

(x, y) = (r × cos(?), r × sin(?))其中,r是圆的半径,?是角度.

不在圆上的坐标被假定为具有半径的圆的坐标55px,其5px大于原始圆的半径(50px).

完整说明:

我最喜欢的部分 - 数学:

  
(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)
  

现在,比较坐标(93.30px, 75px),(97.13px, 90.35px)并(82.14px, 88.30px)与M93,75 L97,90 L82,88.

所以,这就是我计算坐标的方式.

<svg width="125" height="120" viewBox="-12 -8 124 124">
  <defs>
    <clipPath id="shape">
      <path d="M50,50 m-50,0 a50,50 0 0,0 82,38 M93,75 L97,90 L82,88 M0,50 a50,50 0 1,1 93,25z M0,50 L93,75 L82,88z" />
    </clipPath>
    <filter id="boxshadow" width="140%" height="140%">
      <feGaussianBlur in="SourceAlpha" stdDeviation="6" />
      <feOffset dx="0" dy="5" result="offsetblur" />
      <feMerge>
        <feMergeNode/>
        <feMergeNode in="SourceGraphic" />
      </feMerge>
    </filter>
  </defs>
  <path filter="url(#boxshadow)" d="M50,50 m-50,0 a50,50 0 0,0 82,38 M93,75 L97,90 L82,88 M0,50 a50,50 0 1,1 93,25" fill="none" stroke="#F3FEF8" stroke-width="5" stroke-miterlimit="4" stroke-linejoin="round" stroke-linecap="round" />
  <image clip-path="url(#shape)" xlink:href="http://www.lorempixel.com/100/100" width="100" height="100" x="0" y="0" />
</svg>

将此效果应用于多个图像:

该clipPath和filter是在defs标签,这意味着你要定义他们,他们只需要定义一次,如果你想多次使用它们的网页上.

此外,对于相同的图像大小,path元素id="border"总是相同,并在页面上重复使用它,您可以使用use标记为它提供原始path元素的引用,如下所示:

<use xlink:href="#border" />

因此,path每次添加边框时都不必重复相同的元素.

<svg width="0" height="0">
  <defs>
    <clipPath id="shape">
      <path d="M50,50 m-50,0 a50,50 0 0,0 82,38 M93,75 L97,90 L82,88 M0,50 a50,50 0 1,1 93,25z M0,50 L93,75 L82,88z" />
    </clipPath>
    <filter id="boxshadow" width="140%" height="140%">
      <feGaussianBlur in="SourceAlpha" stdDeviation="6" />
      <feOffset dx="0" dy="5" result="offsetblur" />
      <feMerge>
        <feMergeNode/>
        <feMergeNode in="SourceGraphic" />
      </feMerge>
    </filter>
  </defs>
</svg>
<svg width="125" height="120" viewBox="-12 -8 124 124">
  <path id="border" filter="url(#boxshadow)" d="M50,50 m-50,0 a50,50 0 0,0 82,38 M93,75 L97,90 L82,88 M0,50 a50,50 0 1,1 93,25" fill="none" stroke="#F3FEF8" stroke-width="5" stroke-miterlimit="4" stroke-linejoin="round" stroke-linecap="round" />
  <image clip-path="url(#shape)" xlink:href="http://www.lorempixel.com/100/100" width="100" height="100" x="0" y="0" />
</svg>
<svg width="125" height="120" viewBox="-12 -8 124 124">
  <use xlink:href="#border" />
  <image clip-path="url(#shape)" xlink:href="http://www.lorempixel.com/100/100" width="100" height="100" x="0" y="0" />
</svg>
<svg width="125" height="120" viewBox="-12 -8 124 124">
  <use xlink:href="#border" />
  <image clip-path="url(#shape)" xlink:href="http://www.lorempixel.com/100/100" width="100" height="100" x="0" y="0" />
</svg>
<svg width="125" height="120" viewBox="-12 -8 124 124">
  <use xlink:href="#border" />
  <image clip-path="url(#shape)" xlink:href="http://www.lorempixel.com/100/100" width="100" height="100" x="0" y="0" />
</svg>
<svg width="125" height="120" viewBox="-12 -8 124 124">
  <use xlink:href="#border" />
  <image clip-path="url(#shape)" xlink:href="http://www.lorempixel.com/100/100" width="100" height="100" x="0" y="0" />
</svg>
<svg width="125" height="120" viewBox="-12 -8 124 124">
  <use xlink:href="#border" />
  <image clip-path="url(#shape)" xlink:href="http://www.lorempixel.com/100/100" width="100" height="100" x="0" y="0" />
</svg>
<svg width="125" height="120" viewBox="-12 -8 124 124">
  <use xlink:href="#border" />
  <image clip-path="url(#shape)" xlink:href="http://www.lorempixel.com/100/100" width="100" height="100" x="0" y="0" />
</svg>
<svg width="125" height="120" viewBox="-12 -8 124 124">
  <use xlink:href="#border" />
  <image clip-path="url(#shape)" xlink:href="http://www.lorempixel.com/100/100" width="100" height="100" x="0" y="0" />
</svg>