Is it possible to mask or clip an image's shape using CSS?

Question

I am trying to create this design in CSS. Is it possible?

This is my code:

.triangle{     border-radius: 50%;     width: 120px;     height: 120px; } .triangle img {     width: 120px;     height: 120px; } .triangle::after{     right: 150px;     top: 50%;     border: solid transparent;     content:"";     height:  0px;     width:  0px;     position: absolute;     pointer-events: none;     border-color: white;     border-left-color: white;/*white is the color of the body*/     border-width: 60px;     margin-top: -60px }

<div class="triangle">     <img src="http://deskode.com/images/placeholder/team/07.jpg"> </div>

The triangle is formed, but not in the same way as the image.

jsFiddle

Answer 1

This can be achieved using just CSS. Pseudo elements :before and :after are used to make the triangles (positioned relatively to the container), while border-radius creates the rounded corners.

.triangle {      border-radius: 0 60px 60px 0;      height: 120px;      overflow: hidden;          position: relative;      width: 120px;  }  .triangle:before, .triangle:after {      content: "";      height: 0;      left: 0;      position: absolute;      width: 0;  }  .triangle:before {      border-right: 60px solid transparent;      border-top: 60px solid #FFFFFF;      top: 0;  }  .triangle:after {      border-bottom: 60px solid #FFFFFF;      border-right: 60px solid transparent;      bottom: 0;  }

<div class="triangle">      <img alt="" src="http://placehold.it/120x120" />  </div>

JS Fiddle: http://jsfiddle.net/rw7q2te2/1/

Answer 2

With a single class.

http://jsfiddle.net/koh36dsz/1/

.wedge {   width: 0px;   height: 0px;   border-right: 60px solid transparent;   border-top: 60px solid red;   border-left: 0px solid red;   border-bottom: 60px solid red;  }  <div class='wedge'></div>