user3265273 user3265273 - 1 year ago 83
Sass (Sass) Question

Custom image shape with css

I'm trying to create an custom shape with the css only so that it looks like:
image of custom image shape
I have trying with CSS3 Mask but the support is not wide enough i need to support IE 10, Firefox and Chrome


<div class="image_holder">
<div class="image" style="background-image: url();"></div>


.image_holder {
margin: 0 auto;
max-width: 348px;
max-height: 326px;
position: absolute;
top: 0;
bottom: -23px;
left: 0;
right: 0;
margin-top: 10px;

@media (max-width: 991px) {
bottom: inherit;

.image {
background-repeat: no-repeat;
background-position: 0 0;

SVG mask code from Illustrator

<?xml version="1.0" encoding="utf-8"?>
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "">
<svg version="1.1" id="Lag_1" xmlns="" xmlns:xlink="" x="0px" y="0px"
width="348px" height="326px" viewBox="0 0 348 326" enable-background="new 0 0 348 326" xml:space="preserve">
<image id="SVGID_1_" x="0" y="0" width="348" height="326"/>
<clipPath id="SVGID_2_">
<use xlink:href="#SVGID_1_" overflow="hidden"/>
<path clip-path="url(#SVGID_2_)" fill="#E52929" d="181px 1.4833px, 40.0206px 0px,-132.2294,40.6903-171.9397,127.7856

Answer Source

You can use large box-shadow with overflow: hidden on parent element to create this type of shape.

.element {
  margin: 20px;
  background: url('');
  background-size: cover;
  padding: 25px;
  background-position: center;
  display: inline-block;
  overflow: hidden;
.shape {
  width: 140px;
  height: 140px;
  border-radius: 60px;
  transform: rotate(45deg);
  box-shadow: 0px 0px 0px 200px white;
<div class="element">
  <div class="shape"></div>

Recommended from our users: Dynamic Network Monitoring from WhatsUp Gold from IPSwitch. Free Download