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

enter image description here



Solution :

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:

enter image description here

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>


    CSS Howto..

    How to center an item inside of a DIV

    How to create a master page using HTML? [closed]

    JQuery function to show element dependent on the value of hidden HTML input element

    How to attach a div to a particular dimension in html

    How to make CSS NOT do something [duplicate]

    How to style a parent element when the mouse is over a child element?

    how to deselect a css style using javascript?

    How can override a CSS class to that nothing get applied?

    How to read inline styling of an element?

    How to prevent css borders from floating to the top of parent div

    How to Show Menu after full size window in responsive Design

    Navigation Bar - Each button is at a seperate line, how do I fix that?

    How to use imported css styles in GWT correctly

    How to precompile scss to a single css file in webpack?

    How to get the sticky footer to work?

    How to get width of an image after setting the height

    CSS animation - How to fill in “starting from border”?

    How to create desktop widgets [closed]

    How can I divide the screen to these divs in css?

    How to move a circle down by 15px with CSS HTML

    How to prevent transition to run on page load after height is set with javascript in Safari?

    How to have elements copy other element's auto height css?

    How can i use ng-class variable from controller?

    How to set the specificity of a css over-ride class for XPages

    How can I override an inline CSS rule using an external file?

    How to use external css for a background image with gedit

    How to prevent HTML code in a literal inside a DIV from affecting outer page styles

    How to get less to output a css variable with quotes

    How to overlay images with css (cross-browser)

    How to manage length of dashes