Utilizing CSS and JavaScript for Image Masking

Is it possible to create a div that takes on the shape shown in this image and then fill it with an image? Alternatively, is there a way to transform an image into that particular shape using CSS or Javascript?

Additionally, is it possible to arrange multiple of these shapes in the layout displayed in this picture?

I plan to group these shapes into rings similar to the design in the second image provided. The images will be dynamic, so I cannot pre-cut them.

*Update: After some research, I've discovered that the effect I am aiming for is called masking. In Webkit browsers, the property -webkit-mask-box-image works effectively (I can even use a .png image as the mask). However, when attempting to apply the same masking technique in Firefox using an .svg file created in Illustrator, it does not seem to work. Interestingly, the same .svg file functions correctly in Chrome using the -webkit-mask-box-image css property.

htmlcss

Answer №1

Indeed, it is feasible without the need for JavaScript or browser-specific properties.

demonstration

Testing has been conducted on various browsers including Chrome, IE, FF, Opera, and Safari (on Windows 7), with successful outcomes.

The concept involves multiple wheels consisting of slices with varying angles achieved through skew and rotate transforms. The inner wheels overlay the central part of the outer ones.

The version created is relatively simple, comprising of two wheels, 8 images for the inner wheel (resulting in each slice covering 45°) and 12 images for the outer wheel (equating to each slice covering 30°).

Relevant HTML:

<div class='picture-wheel'>
    <div class='outer-wheel wheel'>
        <div class='slice'><div class='bg'></div></div>
        <!-- additional slices present for this demo -->
        <div class='inner-wheel wheel'>
            <div class='slice'><div class='bg'></div></div>
            <!-- additional slices present for this demo -->
            <div class='cover-wheel wheel'></div>
        </div>
    </div>
</div>

Relevant CSS:

.wheel {
    overflow: hidden;
    position: relative;
    border-radius: 50%;
    box-shadow: 0 0 1em;
}
.picture-wheel {
    width: 30em; height: 30em;
    margin: 3em auto 0;
}
.slices-wrapper { 
    position: absolute;
    width: 100%; height: 100%;
}
.slice {
    overflow: hidden;
    position: absolute;
    bottom: 50%; right: 50%;
    transform-origin: 100% 100%;
}
.outer { width: 30em; height: 30em; }
.inner-wheel {
    transform: rotate(7.5deg);
    width: 21em; height: 21em;
    margin: 4.5em;
}
.cover-wheel {
    width: 12em; height: 12em;
    margin: 4.5em;
    box-shadow: inset 0 0 1em;
    background: white;
}
.bg {
    border-radius: 50%;
    background-position: 50% 0;
    background-repeat: no-repeat;
    background-size: 8em 6em;
}
.outer-wheel > .slice {
    width: 15em; height: 15em;
    transform: skewY(60deg);
}
<!-- CSS code continues below -->

An alternate enhanced version with slight modifications:

demo

Answer №3

Explore the world of CSS3 transformations for a unique perspective. Utilize standard matrix transformations, similar to those found in OpenGL or DirectX, to achieve your desired effects.

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

I am looking for guidance on removing the bottom line from the ionic 4 segment indicator. Any advice or tips on

.segment-button-indicator { -ms-flex-item-align: end; align-self: flex-end; width: 100%; height: 2px; background-color: var(--indicator-color); opacity: 1; } I am a beginner in hybrid app development and ...

htmlcsstypescriptionic-frameworksass

Can a function be embedded within a React render method that includes a conditional statement to update the state using setState()?

My application randomly selects three values from an array found within defaultProps and then displays these values inside div elements in the return JSX. It also assigns these values to properties in the state object. I am facing a challenge where I need ...

javascripthtmlreactjsjsx

The Javascript file seems to be unable to recognize the reference to an Angular directive

When working on my project, I encountered an issue with my EventController.js not recognizing the reference to ng-app="eventsApp" from app.js. I followed a tutorial on Pluralsight. Even though it works for the instructor, I keep seeing {{event.name}} inst ...

javascripthtmlangularjs

Improving Consistency: Achieving a Uniform a:hover Effect for Links Listed in Lists

One issue I'm having is with creating a list of links and styling them with a:hover. The problem arises when the list has a defined width wider than the links themselves, causing the LIs to change color before the As on hover. It creates a messy appea ...

htmlcsshoverhtml-listsbullet

One login for accessing multiple forms

I am trying to figure out a way to use one login for two different forms that serve different functions. How can I pass the login details between these two functions? Just to clarify, I only have knowledge of JavaScript and VBScript, not jQuery. For inst ...

javascripthtmlasp-classic

Ensure that only a single onmouseover event is triggered when hovering over multiple elements

I want to create a simple code snippet like the one below: <span onmouseover="alert('hi')">Hello, <span onmouseover="alert('hello')">this</span> is a test</span> However, I need to ensure that when hovering ove ...

javascripthtml

Utilizing D3.js to filter nodes and links by making multiple selections from a checkbox

I am interested in enhancing my current forced directed graph by adding more flexibility. You can access the Jsfiddle here. Currently, there are radio buttons that control the opacity of nodes and links. There are 4 types of nodes: Agent, Customer, Pho ...

javascriptjqueryhtmld3.js

Place a button to the right side of every row to handle overflow-x

I'm trying to place a button next to each row in my table, but here's the catch: the table is inside a div with a fixed width and overflow-x for responsiveness. I want the button to appear next to each row outside of the container div. Currently ...

htmlcsshtml-table

Ways to access a DOM element in Next.js when the class name is dynamically generated

I am currently developing a Next.js app (version 12.1.0) and facing an issue in my Nav component. I am attempting to select a DOM element using const nav = document.querySelector('.nav'); However, this is triggering an error message: TypeError: ...

csssassnext.jscss-modules

A time-tracking counter that tallies the amount of time users spend on the webpage

I'm currently working on a code that tracks the time spent on a page starting from when it was clicked. My challenge now is figuring out how to capture the time when the submit button is clicked and store it in the database. < script > var ...

javascriptphpjqueryhtml

Troubleshooting: Issue with Button Layout in Ionic's ItemSliding Component

How can I create a list item that allows swiping to reveal an archive button? The requirement is for the icon to appear to the left of the text. I'm referring to the documentation on Button Layout: https://ionicframework.com/docs/api/components/item ...

cssangulartypescriptionic2ionic3

Create dynamic modals in ReactJS that appear when a row is clicked

Engaged in a project for an undisclosed entity where patient data is retrieved from their API and displayed as modal on the page. Clicking on a modal reveals more threat information in another modal. The objective is for these modals to render based on a c ...

cssreactjstypescript

The banner may be cropped when viewing on lower resolutions such as mobile devices or when zoomed in

I've encountered a similar issue on a popular website, www.godaddy.com. When zooming in or accessing the site from a mobile device, the right side of the banner gets cut off. However, when viewed on a full-sized computer screen, there are no issues. M ...

phphtmlcsswebbanner

What is the best way to smoothly transition an element into view, then make it disappear seamlessly by fading it

Issue My current code features a <button> that, upon a single click, updates the class of a <div> element to "fade-in" and inserts it into the DOM. This action causes the <div> to visually fade in once it's in the DOM. However, if I ...

javascripthtmlcsscss-animations

Troubleshooting issue with CSS code for table scrolling functionality

I have created an HTML page with a table that gets data from a database. I am trying to limit the size of the table by placing it inside a div like this: <div id="scrollablebody"> <table class="clientTable"> <thead> <tr ...

htmlcss

What is the best way to find an element using either 'className1' or 'className2'?

Within my project, all locators are defined as elements of an enum and follow this format: For example, if it is a CSS locator - DIV_LOCATION("css=div.location-text.text-overflow"). This method parses the string and identifies it as a CSS locator if it be ...

cssseleniumcss-selectors

How do I switch back and forth between displaying content as 'none' and 'block' using JQUERY?

Take a look at this code snippet. <div class="sweet-overlay" tabindex="-1" style="opacity: 1;display: none;"></div> Is there a way to switch the style attribute value from none to block and back? ...

jquerycss

Navigating through multiple overlapping scenes in Three.js using Orbit Controls

Seeking assistance with a dilemma involving the use of Orbit Controls with Multiple Overlapping Scenes. To showcase the issue, I made adjustments to the example found at multiple scenes and developed a test specific to my needs. The code can be accessed h ...

javascriptcssthree.js

Develop a Vue component for a fixed sidebar navigation

I am in need of a vertical navigation bar positioned to the left of my app's layout, with the content extending across the right side. However, I am currently facing an issue where the navbar is pushing all the content downwards. How can I resolve thi ...

javascriptcssvue.jsvuejs2vuetify.js

Retrieving the text from the img tag of a bs4.element.Tag

I have a question that needs to be addressed. My concern involves a list of bs4.element.Tags, similar to the one illustrated in the image below. The issue at hand is filtering out only the href tags that are preceded by an <img> tag. How can this s ...

pythonhtmlimagebeautifulsouptags