score:0
Accepted answer
what you want is impossible because clip-path
will clip the element and all its content.
you can try to build the shape differently using skew transformation like below:
.header {
height: 200px;
position:relative;
overflow:hidden;
z-index:0;
}
.header:before {
content:"";
position:absolute;
z-index:-1;
top:0;
left:0;
right:0;
bottom:0;
transform-origin:left;
transform:skewy(-5deg);
background-image: linear-gradient(215deg, #3f2b96, #a8c0ff);;
}
img {
display:block;
margin: 10px 10px 0 auto;
}
body {
margin:0;
}
<div class="header">
<img src="https://picsum.photos/id/1000/200/200">
</div>
Source: stackoverflow.com
Related Query
- how to make content overly a clip-path shape div?
- How to make a video in background and other video in clip path (with animation) above it.? like this
- React PropTypes - How to make a shape optional with its fields required?
- How to make parent's width wrap its content in React Native?
- How to make Auto Slides Per View with dynamic content using Swiper Reactjs
- React: How to Animate Expanding and Collapsing Div When the Size of the Content is Not Knowable
- How to make a POST request with json content type with Semantic UI API
- How we can make a div placed inside a link tag to be non-navigated
- How do you test the content of a div or other element in enzyme/mocha/chai?
- How to add a clip path to image in tailwind
- How to make content scrollable inside a flex box without given the height?
- How to make path for pages in NextJS case insensitive
- How to make cell content in ag-grid centered vertically?
- How to border bottom the div content on click
- How to make path param to be optional in react router dom(v4)?
- How to make the color of a div change permanently after it has been clicked in react.js
- how to copy div content to clipboard as a string format
- How do I make three tables in one div not overlap on resizing?
- How do I make a single child div scroll?
- react router 4 - how to make a root path with nested routes but fallback to not-found
- how to properly make div tab in javascript to work with reactjs
- How to make div elements appear inline with a flex direction of column?
- React Router v6 : How to render multiple component inside and outside a div with the same path
- How to make header and footer of Modal fixed while allowing the Modal content alone to scroll?
- How to make the screen reader start to read the web content after scrolling
- How to make Appbar content not stretch to sides on larger displays
- How to make a div clickable but ignore the children?
- How to add a label to the border of a div and make it responsive?
- how to make animation for div in react using react-spring when hiding?
- How to make the text inside div stick to the left?
More Query from same tag
- ReactJS updating two components composed of lists
- Redux-thunk action returns a function, which is not executed, so data is not fetched
- Redirect to other component on page refresh
- Root folder of my React application conflicts with React-Router
- React: SetInterval in ComponentDidMount causing error "Warning: Can't perform a React state update on an unmounted component."
- splitting the actions and reducers into different files
- SCSS kebab-case does not work with scss modules in React (typescript template)
- How to test a function that you don't have direct access to
- @material-ui/core - How to set Textarea Value
- getting the most recent value in a react component
- How do I use the SpeedDial to upload a file?
- Update parent component state with a function whose arguments rely on child component
- React: Button does not work (onClick) - should be passed to index.js but nothing happens
- Proper way to change Form.Control text with custom onChange
- How to use dynamic link in next js Image?
- Can't access to Object Value
- How to Group radio button which are in different rows of ag-grid
- How can I save the text value of the checkbox on Firestore?
- Add custom data- attribute to Option component react-select
- Unable to Install Kepler React - TypeScript
- React App suddenly stopped working; TypeError: Cannot read properties of undefined (reading 'prototype')
- Fetch data from NewsApi (react, axios)
- Loop through Meteor React components
- has no method 'mountComponentIntoNode' with Jest + React
- How to unit test switch case in React using Jest?
- Run through an array and split values
- ReactJS: can not change style with changing state
- How to append to a previous state array while executing an arrow function inside setState?
- react-router upgrading conflict withRouter
- How can I add the value of a button to a textarea when clicking the button?