Using CSS to cut out a triangle shape from an image

Our designer has a vision for this:

However, I'm struggling to find a suitable method for creating the triangle crop effect:

  • Implementing an :after element that spans the entire width and utilizes border tricks to form a triangle shape
  • Creating a large white :after element that is rotated yet doesn't obscure any text
  • Exploring potential solutions involving unknown magic filters
  • Using a canvas to crop in JavaScript, then loading the image as a base64 url (which might be excessive)

Any thoughts or suggestions?

cssimagepositioncrop

Answer №1

Edit: version 2: is now operational with background changes.

Here you have it:

HTML code utilized a div with a backdrop, though an img component could be easily substituted.

<div class="wrapper">
    <div class="image"></div>
</div>

CSS styling primarily for setup, but essentially implement transform:rotate() on an :after content, and adjust positioning to form a clean slice across your image. Keep everything contained within the designated container for optimal results.

.container {
    width: 250px;
    height: 100px;
    position: relative;
    overflow:hidden;
}
.image {
    width: 250px;
    height: 100px;
    background-color: blue;
    position: relative;
}
.image:after{
    content:"";
    position: absolute;
    width: 400px;
    height:125px;
    background-color: white;
    top:90px;
    left:-20px;
   transform: rotate(5deg);
   -moz-transform: rotate(5deg);
   -webkit-transform: rotate(5deg);

}

Answer №2

One way to achieve a cropped image is by utilizing the CSS clip property:

.cropped-image {
    position: absolute;
    clip: rect(110px, 160px, 170px, 60px);
}

By specifying the values in the rect function of the clip property, you can determine which section of the image will be displayed. Take a look at this informative demonstration.

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

Organizing knockout data outcomes into two separate columns

Is there a way to split up this code into two columns using Knockout and HTML? I can do it easily in CSS, but the goal is to divide the results into segments 1-5 and 6-9. Here is the code snippet. Also attached is a screenshot for reference. Thank youhtt ...

htmlcssknockout.js

What is the best way to eliminate the underline in a text hyperlink?

I've encountered an issue with my CSS file. I tried using the code below: text-decoration: none; However, the text is not displaying as expected. I had to resort to using JavaScript for adding a hyperlink behind the text, which I believe is causing ...

jqueryhtmlcssmouseoverunderline

Set the div to have a position of absolute, disregarding any other parent divs that may also have position absolute set

Is there a way to bring an outsider class <div> to the front of all others, even when all <div> elements are set as position: absolute;? How can the .free-object, which is inside .left, overlap both .left and .right? I have tried using z-ind ...

css

Unexpected behavior from Internet Explorer - Span contents remain unchanged despite valid input

I have a simple question because I'm feeling a bit lost. Check out this JSFiddle link It seems that in Internet Explorer, the contents of my span won't update even though the input is valid. However, in other browsers, the span content changes ...

javascriptjquerycsshtml

Does CSS delayed visibility transition fail to activate JavaScript transitionend event for elements' visibility changes?

My current approach involves using a clever method to delay the transition of visibility, in combination with opacity. So far, everything is working smoothly: <body> <button>run</button> <div class="box"></div> & ...

javascriptcsscss-transitions

Tips for aligning website content (including the body and navigation bar) at the center in rtd sphinx

Trying to create documentation with the Read the Docs theme for Sphinx documentation. Want to center the entire webpage, including both the body and left navigation bar so that as the window width increases, the margins on both sides increase equally. Righ ...

htmlcsspython-sphinxread-the-docs

The CSS property for fixing an element in place: position

On my website, I have a position:fixed <div> that appears in the center of the screen. Whenever there are messages, a second position:fixed <div> is displayed next to the first one. I've noticed that on various screen sizes, like a netbo ...

csshtml

Attempting to enlarge an image by hovering over it proves to be futile

Currently, I am exploring CSS and attempting to enlarge 2 images when they are hovered over. Unfortunately, the desired effect is not working. .imagezoom img { position: relative; float: left; margin: 50px 5px 0px 42px; border-color: rgba(143, 179, 218, ...

htmlcss

What is the best way to style a tiled design using CSS?

What is the best way to code the page without using javascript? Both of the HTML elements (div1, div2) need to have a fixed size. ...

htmlcss

Personalized element IDs and unique CSS styles

After editing the code snippet below... <div id="rt-utility"><div class="rt-block fp-roksprocket-grids-utility title5 jmoddiv"> I applied the changes in my custom.css file like this: #rt-utility .rt-block {CODE HERE} However, when attemptin ...

css

Tips for displaying an image during the AJAX interval

I am currently working on a web project that uses ajax, and I want to display an image (such as a progress bar) during the loading time. Basically, I would like to show this image when a user clicks on a div element and then make it disappear once the resu ...

phpajaximageintervals

I am having difficulty organizing my text into two grid columns and aligning it in the center

.hero { display: grid; grid-template-columns: repeat(2, 33.45rem); grid-template-rows: 12.5rem; border-bottom: .05em solid #05d31f; width: 69.8rem; height: 16.5rem; } .hero-title { grid-row-start: 1; grid-column-start: 1; } .hero-title h ...

htmlcssreactjs

Incorporating an HTML Canvas element within a CSS grid design

I've been attempting to integrate an html canvas that I created into one of the css grid classes specified in my code. The code runs when the "Calculate" button is clicked. Upon clicking the button, the <div> section designated for the canvas r ...

javascripthtmlcsscanvas

Personalize the way UIkit tooltips appear

I've been working on customizing a uikit tooltip for my checkbox. I managed to change the font and background color, but for some reason, I can't adjust the font size. I even tried adding a custom class without success. Do you think it's pos ...

cssuikit

Are you experiencing empty boxes instead of Glyphicons in Bootstrap 3?

Having some trouble using Glyphicons with Bootstrap 3. I've noticed that a few of them aren't displaying properly. For instance, when trying to use these three glyphicons, the first one doesn't seem to show up correctly (appears as an empty ...

csstwitter-bootstraptwitter-bootstrap-3glyphicons

Can someone explain why my button icons are not aligning to the center properly?

I have a small issue with the icons I pulled from react-icons - they appear slightly raised within the buttons. How can I position them in the middle? That's my only query, but I can't post it alone due to mostly having code in my post. What an ...

javascriptcssreactjs

The email message content is not displaying correctly

I'm in the process of merging multiple HTML tables into a single $message, which will then be passed to the email body as shown below. // Sending the email if(smtp_mail($To,$cc, $Subject, $message, $headers)) { echo "Email Sent"; } else { echo "An ...

htmlcssemailhtml-email

Incorporating and designing a side button using jQuery Mobile

I'm working on adding a button to the left side of the screen that is round (but not necessarily) and partially visible, with a visually appealing design. This button will allow users to open a side menu panel. Below is the HTML code for the button: ...

javascripthtmlcssjquery-mobile

Is there a way to continuously switch a CSS animation class without needing a second click?

I am seeking a solution to animate the color and size of a div box, then return it to its original state when a button is clicked. Here is an example of my code: document.getElementById("andAction").addEventListener("click", function() { document.getE ...

javascriptcssanimationcss-animations

Steer clear of using grey backgrounds for anchors/links in IE 10

What is the best way to prevent the irritating grey background that appears on anchors in IE 10 when they are clicked? ...

cssstylesanchorinternet-explorer-10