## How to style this triangle on a circular image?

Tags: css,html5,css3,css-shapes

### Problem :

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

### Solution :

You can do this using `svg`'s `clipPath` and `filter`s 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`).

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

## How to vertically align in the middle a clickable image (between ) inside a div in a responsive manner?

Use like this <div class="accounts"> <a href="LinkA" target="_blank"><img src="Vendors/Images/GithubLogo.png" alt="Github"></a> </div> <div class="accounts"> <a href="LinkB" target="_blank"><img src="Vendors/Images/SOLogo.png" alt="Stack Overflow"></a> </div> ...