How to prevent image rotation when applying skew?

I am attempting to slice a small element out of an image using the skew function.

However, when applying skew, the image appears distorted and broken. I would like to maintain the image's original orientation without rotation.

This is the code snippet I have used:

.image-skew{
/*   transform: skewX(-25deg); */
  position: absolute;
  width: 100%;
  height: auto;
}

.img-skew-invest {
  transform: skewX(-25deg);
  display: flex;
}
<div class="image-skew">
  <img class="img-skew-invest" src="http://thebusiness.vn/uploads/business360/chuyenkinhdoanh/lazada-co-noi-got-foodpanda-roi-khoi-viet-nam/lazada-co-noi-got-foodpanda-roi-khoi-viet-nam.png" alt="" style="width: 100%; height: auto"/>
</div>

Using the same image,

I cropped a portion of the picture with skew, although it should not result in any rotation.

https://i.sstatic.net/PItdI.png

htmlcss

Answer №1

clip-path is the solution to your needs:

.image-skew {
-webkit-clip-path: polygon(25% 0, 100% 0, 100% 75%, 75% 100%, 0 100%, 0% 25%);
clip-path: polygon(25% 0, 100% 0, 100% 75%, 75% 100%, 0 100%, 0% 25%);
}

You can experiment with it here: https://jsfiddle.net/hgzsr5f5/1/ or use a clip-path generator tool:

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

Retrieve the folder name after selecting the folder in the input field

I have used the code snippet below to select a folder and parse all the files within that folder. While I am able to retrieve a list of all files, I am unsure how to extract the folder name alone from the path. For example, if the folder path is C:/Folder ...

javascripthtmlnode.js

Using a simulation to deactivate webpage elements and showcase the UpdateProgress control

I am currently attempting to disable certain page elements and display an update progress control in my application. In order to achieve this, I have applied a style sheet with the property filter: alpha(opacity=85); However, I encountered an error stati ...

c#asp.netcssajax

What is the best way to access all of a class's properties in JavaScript?

Is there a way to retrieve all the properties of a class using JavaScript? For example, if I have a class like this: .menu { color: black; width: 10px; } How can I extract "color: black; width: 10px;" as a string using JavaScript? Thanks in advance! ...

javascriptjquerycsspropertiesstyles

Print Vue page with the same styling as the original

How can I add a print button to my application that prints the page with the original CSS styles? I am currently using window.print() function and have a separate file called print.scss with specific print styles. @media print { header {display:none; ...

cssvue.jsprintingstyles

Error occurs when a list index goes out of range within a for loop that contains an embedded

Here is the Python code I am working with: raw_list = reminders_context['data']['reminder_list'] This code retrieves the necessary information successfully. However, when I try to run the following code snippet, it gives me a "list i ...

pythonhtmldjango

What is the most efficient method of organizing form components together?

After exploring numerous tutorials, I have yet to discover the ideal solution for properly marking up a form that contains logical groupings of elements such as labels, controls (input or select), and previous values - essentially single fields. My prefer ...

htmlcssforms

I'm having trouble getting my modal to open, it just displays the information on my page instead

I am encountering some difficulties with my model window. I would like it to open a modal that shows a larger version of the photo and description when the thumbnail is clicked. However, I have not been able to get it to work properly. The only time it pop ...

htmlcsspopupmodal-dialog

html - generating a block of code

Does anyone have any tips on creating a block like this one using CSS and HTML: Check out this image for reference I want to streamline the process and make it faster, any suggestions? ...

htmlcssrounded-corners

When the collapse button is clicked, I aim to increase the top value by 100. Subsequently, upon a second click, the top value should

https://i.stack.imgur.com/p9owU.jpghttps://i.stack.imgur.com/Kwtnh.jpg I attempted to utilize jQuery toggle, but unfortunately, it is not functioning as expected. <script> $(document).ready(function () { $(".sidebar ul li&quo ...

javascripthtmljquerycss

Is there a difference in performance between using multiple inline scripts versus one combined inline script?

Comparing Multiple Inline Scripts to a Single Conjoined Inline Script: <script type="text/javascript">/* some codeblock 1 */</script> <script type="text/javascript">/* some codeblock 2 */</script> <script type="text/javascript"& ...

javascripthtml

How does the browser interpret the CSS property transform: none?

Does the transform: none result in matrix(1,0,0,1,0,0) or a different outcome? I am looking to reset the transform; what is the best approach for this? <style> .box{ height: 100px; width: 100px; background-color: red; transition: 0.5s; transform: ...

htmlcsstransform

Translate a portion of a painting by utilizing context.putImageData()

I am attempting to gradually fill a canvas with pieces of the original image. To achieve this, I need each square of the image to be filled in iteratively on the canvas. To optimize performance, my approach involves rendering the original image onto an of ...

javascripthtmlcanvas

Dynamic script appending encounters unforeseen challenges

After attempting to add a script either on click or after a time delay, I am encountering an issue where the script is not being appended. Strangely, if I remove the setTimeout function, the script gets added successfully. The same problem persists with ...

javascriptjqueryhtml

What are the steps to apply material-ui's error-themed style (color) to non-form text?

When it comes to using error styles for form inputs like text fields, the documentation is straightforward. But what about applying the same style to a custom element, such as a text label for a file upload button or another unique component that doesn&apo ...

cssreactjsmaterial-ui

Top strategies for creating a fully responsive HTML design

Currently, I am exploring the concept of responsiveness in my small projects for educational purposes. I have been researching websites such as: w3schools-mediaquery While I have come across some interesting insights, I am curious about how to effectivel ...

htmlresponsive-designresponsive

Building a local database using the MVC framework concept

Can a locally stored database be developed using MVC framework principles in javascript and html5? Thank you Ravindran ...

javascriptdatabasehtmljavascriptmvc

Transitioning images while hovering over a different element

Need some inspiration for a school project? I'm stuck on how to create a smooth image fade effect in CSS when hovering over another element (like an anchor link) on the same page. I've been attempting to use the :target and not(:target) selector ...

htmlcss

Setting a div's width to cover 100% of the screen's width

I'm currently working on creating a 2 column layout using divs. The left column has a fixed size of 150 px, while the right column should extend to the right boundary of the browser. I've tried using both width:auto and width:100% values for the ...

csshtml

Achieving a sticky scrollbar effect in CSS/JavaScript for scrolling within nested divs

I am trying to create a table with vertical scrolling for the entire table content. Additionally, I need two columns within the table to be scrollable horizontally, but the horizontal scrollbars disappear when the vertical scrollbar is present. How can I k ...

javascripthtmlcssscrollbar

Using jquery to dynamically set the value of a drop down menu

I am struggling with a dropdown list that is being generated dynamically using ajax when the page loads. Additionally, I have a PHP variable that holds the default selected value. However, despite my attempts to select this value, it does not work as expec ...

phpjqueryhtmldrop-down-menu