How to style this triangle on a circular image?

Question

I am using bootstrap 3.3 in my project, I would like to style the photo using CSS. please guide me how can to do this?

The preview (what I need):

Jelks

Answer 1

You can do this using svg's clipPath and filters for the box-shadow.

---

The co-ordinates for the triangle were calculated using the formula for a co-ordinate on a circle:

(x, y) = (r × cos(θ), r × sin(θ)) where, r is the radius of a circle and θ is the angle.

The co-ordinate that is not on the circle was assumed to be a co-ordinate on a circle with radius 55px, which is 5px more than the original circle's radius(50px).

---

Complete Explaination:

My favourite part - Math:

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

Now, compare the co-ordinates (93.30px, 75px), (97.13px, 90.35px) and (82.14px, 88.30px) with M93,75 L97,90 L82,88.

So, that's how I calculated the co-ordinates.

---

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

---

Applying this effect to multiple images:

The clipPath and filter are in defs tags, which means you are defining them and they only need to be defined once if you wish to use them multiple times on your page.

Also, the path element with id="border" is always going to be same for identical image sizes and to re-use it on the page you could use the use tag giving it a reference of the original path element like so:

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

So, you don't have to repeat the same path element everytime you add a border.

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

Ploy

i have to display multiple images in a block, if i used this code. i see here the id's shape, boxshadow, sourceGraphic are become duplicate. so this is not issue right? – Jelks

@veblearner - I'll show you how you can display multiple images. – Ploy

Answer 2

You will need to use use two images for the triangle and the circle you can use background-image or you can use img and place them accordingly by position:absolute, In the below example I have use background-img

div {
  width: 100px;
  height: 100px;
  border: 2px solid rgb(199, 206, 212);
  border-radius: 50%;
  position: relative;
  background: url(http://i745.photobucket.com/albums/xx93/ily_cin/DSC03085.jpg) no-repeat left bottom;
  background-size: cover;
  box-shadow: 4px 4px 14px 0px rgba(50, 50, 50, 0.75);
}
div:after {
  content: '';
  position: absolute;
  bottom: 2px;
  right: 6px;
  width: 20px;
  height: 20px;
  background: url(http://i745.photobucket.com/albums/xx93/ily_cin/DSC03085.jpg) no-repeat;
  background-position: -71px -77px;
  border-width: 0 2px 2px 0;
  border-style: solid;
  border-color: rgb(199, 206, 212);
  box-shadow: 9px 9px 12px 0px rgba(50, 50, 50, 0.41);
}

<div></div>

Glomerulonephritis

Answer 3

Use it:-

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

CSS:-

.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);
}

Real answer was given by Irvin Bootstrap Image Circle Inner Shadow

Gadmon

i know that image cirlce, but i need that tail end style – Jelks