Styling images with unique shapes using CSS

I'm attempting to design a unique shape using only CSS so that it resembles the following: image of custom image shape I've been experimenting with CSS3 Mask, but unfortunately the support isn't broad enough as I need it to work in IE 10, Firefox, and Chrome.

Here's the HTML:

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

And here is the SASS code:

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

This is the SVG mask code created in Illustrator:

<?xml version="1.0" encoding="utf-8"?>
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
<svg version="1.1" id="Lag_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
 width="348px" height="326px" viewBox="0 0 348 326" enable-background="new 0 0 348 326" xml:space="preserve">
    <g>
        <defs>
            <image id="SVGID_1_" x="0" y="0" width="348" height="326"/>
        </defs>
        <clipPath id="SVGID_2_">
            <use xlink:href="#SVGID_1_"  overflow="hidden"/>
        </clipPath>
        <path clip-path="url(#SVGID_2_)" fill="#E52929" d="181px 1.4833px, 40.0206px 0px,-132.2294,40.6903-171.9397,127.7856
    c-39.7103,87.0961,78.2502,157.8612,97.9829,170.1088c19.7319,12.2485,58.5174,42.1872,117.0348,12.2485
    c58.5174-29.9395,118.3957-94.5812,121.7973-130.6441c3.4026-36.0629-1.7918-74.5152-52.6753-118.7237
    C243.2785,18.7341,220.6634,1.4833,181.1749,1.4833"/>
    </g>
</svg>
htmlcsssvgsass

Answer №1

If you're looking for a way to achieve this using pure CSS, here is an approximate solution:

.image-holder {
  position: relative;
  overflow: hidden;
  height: 150px;
  width: 150px;
}
.image-holder:before {
  box-shadow: 0 0 0 1000px #fff;
  transform: rotate(-45deg);
  border-radius: 40px;
  position: absolute;
  content: '';
  bottom: 10px;
  right: 10px;
  left: 10px;
  top: 10px;
}

.image-holder img {
  display: block;
  height: auto;
  width: 100%;
}
<div class="image-holder">
  <img src="http://placehold.it/150">
</div>

Answer №2

To achieve this unique shape, you can apply a large box-shadow along with overflow: hidden on the parent element.

.element {
  margin: 20px;
  background: url('https://img.grouponcdn.com/deal/5EXVDNMDEe1mtyEK6Pgp/ZC-1057x634/v1/c700x420.jpg');
  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>
</div>

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

establishing irregular edges for the div container

Looking to create a class that can transform an element into a specific shape using CSS. Not entirely sure if this is achievable with pure CSS alone, but applying a class to the image element will morph it into the desired shape as shown below. <style ...

htmlcss

Reverting a concealed segment

Can anyone make sense of my unconventional explanation? I've set up a hidden section as shown below: <section class="intro"> <label> <input type="checkbox"> <span class="menu"> <span class="hamburger"></span&g ...

javascriptjqueryhtmlcss

Issue with Bootstrap 4's vertical alignment center in flex layout not functioning as expected

Im using Bootstrap 4 to create a responsive layout with 3 columns that adjust order, width, and horizontal alignment based on screen size. Everything is functioning correctly except for the horizontal center alignment of the images on screens smaller than ...

twitter-bootstrapcssflexboxbootstrap-4

What is the best way to ensure a table is responsive while maintaining a fixed header? This would involve the table scrolling when it reaches the maximum viewpoint, while also keeping

Can anyone help me create a responsive table with a fixed header that scrolls when it reaches the maximum viewpoint without scrolling the entire page? I've tried using box-sizing: border-box; and overflow-x:scroll; but it didn't work. Any suggest ...

javascripthtmlcss

As I scroll, I hope the texts will stay fixed against the backdrop image

Is it possible to make the #home section fixed to the background while scrolling, including all the texts and buttons? I envision it like having texts embedded in an image. The text is located in the middle left of the page (let's keep this as default ...

htmlcss

Transitioning colors in the renderer using ThreeJS and GSAP

I'm attempting a basic color transition using gsap to modify the renderer's background color. The issue arises when trying to transition from white to black – it simply changes the color abruptly without any fade effect. Conversely, transition ...

javascriptcssanimationthree.jsgsap

Submitting information via jQuery

https://i.stack.imgur.com/VU5LT.jpg Currently, I am working on integrating an event planner into my HTML form. However, I am facing difficulty in transferring the data ("meetup", "startEvent", "break") from HTML to my database. Using jQuery, I was able to ...

javascriptjqueryhtml

Having difficulty choosing a drop-down menu option with AJAX technology

My current project involves creating a page where the database is updated upon a drag-and-drop event. Specifically, I have implemented drag-and-drop functionality on a page, and whenever a div (deal-card) is dragged and dropped into another div (stage-colu ...

javascripthtmljquerydjangoajax

Is it possible to merge two classes in CSS together?

Struggling to merge two CSS classes, I attempted with the following code: .container{ .ningbar } Hoping to unite the elements of both the ningbar and container layers. Any advice would be greatly appreciated. Thank you, Phineas. ...

cssclass

Connecting to distinct sections on another webpage

The purpose is to create specific links to sections on merchandise.html from various html pages within the site. All sending links are established by a .dwt file to ensure consistency across all sending pages. While this functionality works in Internet Ex ...

htmlhyperlink

Effective methods for increasing the height of a column div upon hovering, while also maintaining the position of surrounding columns

Struggling to make this work for 48 hours with no success. Here's the challenge: there is a standard row with regular columns that have an additional product class: <div class="row"> <div class="col-lg-4 product"> // Content ...

htmlcsstwitter-bootstrap

Learn the steps to update PHP headers on a specific website using AJAX

contactfrm.php <?php // Server side validation $name = $_POST['name']; $surname = $_POST['surname']; $bsubject = $_POST['subject']; $email= $_POST['email']; $message= $_POST['message']; $to = " ...

phphtmlcssajaxforms

Error: The WebGL function enablevertexattribarray has an index that is outside the valid range

Take a look at the vertex and fragment shaders I've written: <script id="shader-fs" type="x-shader/x-fragment"> precision mediump float; uniform sampler2D uSampler; varying vec4 vColor; varying vec2 vTextur ...

htmlopengl-eswebgl

After attempting to read in this JSON text string, it is stubbornly refusing to display properly with a line break

I have a snippet of text stored in a JSON file that appears like this "I want a new line\nhere". This is the code I am using to display the text after replacing the \n with a <br />: <p className="subtitle is-5 has-text-w ...

htmljson

Creating a two-column image gallery inside a div:

I need to organize a group of thumbnails into two columns with four thumbnails in each column, solely using CSS. The thumbnails are all structured as follows: <a href="..."><img /></a> Is it possible to achieve this layout through CSS r ...

cssxslt

Is there a way to make two parallelograms overlap seamlessly and adjust in size automatically using HTML?

Recently delving into the world of HTML and CSS, I've set my sights on designing something unique involving parallelograms that adjust dynamically. My vision includes four overlapping parallelograms starting from the top at 25%, 50%, 75%, and finally ...

htmlcssshapesskewcss-shapes

extracting data from checkbox to use in an angular function upon being selected

Currently, I am creating a list of checkboxes with distinct string values: heading, paragraph, list, table, visualtitle. I believe the current approach using (change)="onChange('heading', $event.target.checked) may not be the best way to han ...

htmljquerycssangular

Incorporating a PHP script into an HTML document for display

I have a PHP file that retrieves line items from a database and displays them in a table. On an HTML page, I have a form for adding items to the database that houses a restaurant menu. I want to embed the PHP script responsible for showing the line items i ...

phphtmldatabase

Unable to assign image src to a dynamically generated div

My current task involves setting the background URL of a dynamically created div in JavaScript, intended for use with the jQuery Orbit slider. Below is my approach: var content1 = null; $("#featured").html("<div id='content' style='&apos ...

javascriptimagehtmlsrcorbit

The text from one section found its way into a different section, blending seamlessly

My Skills text is mistakenly appearing in the home-section. You can see the issue in the image below: https://i.sstatic.net/Bl2GJ.png In the provided picture, the Skills section is displayed within the home section, which is not the intended layout. It&ap ...

htmlcssbootstrap-4