Utilize SVG to clip or mask the top-right corner of an image

Is there a way to clip the top right corner of an image with rounded corners using SVG without compatibility issues (excluding IE)? I want it to be flexible in size, preferably without fixed aspect ratios.

<svg xmlns="http://www.w3.org/2000/svg" data-name="Layer 1" viewBox="0 0 43.45 43.45">
  <path fill="black" fill-rule="evenodd" d="M0 0v.05c1.15.11 2.24.6 3.06 1.42l38.93 39.06c.79.79 1.26 1.83 1.4 2.92h.06V0H0Z"/>
</svg>

I have been struggling to achieve this effect despite trying various methods:

  • Clipping/masking with inline SVG
  • Cutting the top right corner with polygon paths (and applying separate border radius)
  • Using Webkit masks along with compositing
  • Experimenting with objectBoundingBox properties
  • Exploring border-image solutions
  • And many more approaches...

The desired outcome should resemble the top right corner in this image: Expected Result

If anyone has insights or suggestions on how to accomplish this properly, I would greatly appreciate it!

csssvgclip-pathcss-mask

Answer №1

Utilize it as a mask, as demonstrated below. Take note of the use of 80px 80px, which determines the size of the SVG.

img {
  border-radius: 5px 0 5px 5px;
  -webkit-mask:
    linear-gradient(#000 0 0),
    url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 43.45 43.45"><path fill="black" fill-rule="evenodd" d="M0 0v.05c1.15.11 2.24.6 3.06 1.42l38.93 39.06c.79.79 1.26 1.83 1.4 2.92h.06V0H0Z"/></svg>') 
    100% 0/80px 80px no-repeat;
  -webkit-mask-composite: xor;
          mask-composite: exclude;
}
<img src="https://picsum.photos/id/1/300/250" >

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

Adding a border to an image using JQuery

I have implemented an image slider as shown below: <div class="bx-wrapper" style="width:516px; position:relative;"> <div class="bx-window" style="position:relative; overflow:hidden; width:516px;"> <ul style="width: 999999px; pos ...

jquerycss

What is the reason for Safari using different fonts on iPad compared to Mac?

Whenever I access our website through Safari and need Github authentication, I encounter this issue: Please check the code snippet below: Make sure to configure these settings: .breadcrumb-link { font-family: SFPro-Medium; font-size: 22px; co ...

cssiosmacos

Dealing with unsupported CSS properties in Next.js or implementing @supports directives in Chakra-UI

Currently, I am working on a React component that adjusts opacity values based on the support for the CSS backdrop-filter directive: background={(() => { const opacity = isBackdropFilterSupported() ? 0.75 : 0.98 return ( `linear-gradient( ...

cssnext.jschakra-ui

In JavaFX, when adjusting the transparency of a popup window, only the brightness changes while the solid color remains unchanged, effectively concealing

Is it possible to have a transparent popup window (errorDialog.fxml) on top of the main window (mainWindow.fxml) with 50% opacity while still showing the content of the main window underneath? My attempts at setting the background color of the overlay insi ...

cssjavafxfxml

Utilize jQuery to retrieve data attributes and set them as CSS properties in a key-value format

Looking at the HTML below: <h4 data-padding-top="100" data-padding-left="0" data-text-align="left" data-color="#ffffff">Promotion Two</h4> I aim to use the data attributes as CSS styles for the H4 element. I have attempted to achieve this ...

jquerycsskeyvaluepair

Unable to remove the white space appearing below and after a div in HTML

I have been working on creating a website. You can find my JSFiddle here. On my JSFiddle, you might notice a white gap above the black image labeled INSURANCE, and another white gap below it. I've tried various solutions but haven't been able to ...

javascriptjqueryhtmlcss

Why does the div class play nice with CSS while the span class is causing issues?

Can anyone explain why the CSS is not implemented when using a span class for marking up a letter, but it works fine with a div class? I thought both should work, considering one is a block-level element and the other is inline. Here's the line that w ...

csshtml

Chrome fails to apply CSS to Polymer 2 web component

The implementation of my web component in Polymer v2 is causing a styling issue specifically in Google Chrome. Despite including a CSS file that defines a style called n-action-button, the styling is not being applied to the content of the web component in ...

javascriptcssgoogle-chromepolymerpolymer-2.x

Increase and decrease a counter in Javascript by clicking on two separate image tags, with increments and decrements between 1 and 10

Hello! I really appreciate your help. I am currently facing the following issue: <div id="thumb1"> <img class="img-responsive" id="prova" src="img/thumb-up-dark.png" alt=""> <div id="pinline">0</div> ...

javascriptjqueryhtmlcsscounter

The Vertical Spacing Between Dividers and Proper Size of Sub-Dividers to Accommodate Content on the Page

First and foremost, a huge thank you to everyone who has assisted me in resolving numerous issues related to my basic layout and syntax. I believe I have successfully cleaned up my syntax, and my CSS and HTML development are progressing smoothly. Now, let ...

htmlcss

The use of the display property with inline-block is not functioning correctly on mobile devices

Can anyone help me figure out why my divs are displaying differently on PC versus phone? They line up well on the computer, but on the phone, the last div is on a new line. Here is a snippet of my code and screenshots for reference. Thank you in advance fo ...

htmlcss

Attempting to achieve the simultaneous display of an image overlay and image zoom when hovering over the mouse

I'm struggling to display an image overlay and image zoom simultaneously when hovering the mouse. After adding the image zoom effect, the overlay disappears. It seems like one transition is overriding the other. Whenever the zoom works, the overlay do ...

htmlcssimagetransition

Choose the sequence in which CSS Transitions are applied

Currently facing an interesting challenge, but I'm confident there's a clever solution out there. The issue at hand is with a table that has three different sorting states for its columns: unsorted, where no icon should be displayed, ascending, ...

javascriptcssreactjscss-transitionsreact-table

Fonts fail to load on Internet Explorer 10

Link to the website in question: In my fonts.css file, I am loading multiple fonts as shown below: @font-face { font-family: GothamBook; src: url('../fonts/Gotham-Book.otf'); src: url( ../fonts/Gotham-Book.otf ); /* IE */ } @font-face ...

cssinternet-explorerfontsfont-face

The navbar extends fully in height when viewed in Safari browser

My navbar design is flawless on most browsers, but in Safari it appears stretched at full screen height. Here's how it looks in other browsers: https://i.sstatic.net/H9noX.jpg https://i.sstatic.net/Embf3.png However, in Safari...not so much: https:// ...

csssafari

The powers of jQuery and CSS selectors

Previously, I utilized the following code to extract text from the data-placeholder attribute and apply it as a placeholder for my div. [contentEditable=true]:empty:not(:focus):before { content:attr(data-placeholder) } While this method worked well b ...

javascriptjquerycss

Leveraging CSS keyframes to create dynamic animations

I am facing an issue with CSS while designing my website. I reached out to the plugin developer for help through a ticket submission, but unfortunately, I have not received a response yet. On my homepage at , I have utilized CSS keyframes to create a text ...

csseffectkeyframe

What causes two inline-block elements to not stay aligned horizontally?

After researching how to create a horizontal list (Navigation Bar), I decided to include a header for the current page alongside the navigation links on the same line. However, when I view the file in a browser, the header and horizontal unordered list are ...

htmlcssformatting

What is the best way to clear and fill a div without causing it to resize?

I am faced with a challenge involving four thumbnail divs labeled .jobs within a #job-wrap container. When a .job is clicked, I want the #job-wrap to fade out, clear its contents, load information from the selected .job, and then fade back in. However, whe ...

javascriptjqueryhtmlcss

Stars not functioning in Firefox for CSS Angular2 ng2-rating component

Recently, I've been utilizing the ng2-rating module found at https://www.npmjs.com/package/ng2-rating. However, an intriguing issue has arisen specifically in Firefox - a mysterious gap between the filled stars and empty stars. Strangely enough, this ...

cssangular