clip-path

问题 Currently using this CSS for a bottom slant going up from left to right: clip-path: polygon( 0 0, 100% 0, 100% calc(100% - 3vw), 0 100% ); It works very well for a responsive solution but having a hard time figuring out how to do this for a responsive solution for a slant at the top of the div going down from left to right. I tried this: clip-path: polygon( 0 0, 100% calc(100% - 29vw), 100% 100%, 0 100% ); Thank you! 回答1: You can adjust like below. You make the second point to start lower by

问题 I'm trying to create a pyramid. I figured I'd use the CSS clip-path for that. I meant to do a triangle (which I managed to do) and several trapezoids beneath it (even the first one failed). .container { min-width: 50%; max-width: 50%; } .triangle { background-color: yellow; clip-path: polygon(90% 100%, 50% 0%, 10% 100%); } .trapeze { background-color: blue; clip-path: polygon(0% 10%, 0% 90%, 0% 100%, 100% 100%); } div { min-height: 200px; max-height: 200px; border-color: black; border-style:

问题 Is it possible to set image in same shape with clip-path css. Original Image Expected image with css 回答1: You don't really need clip-path or mask. A skew transformation with border-radius can do it: .box { margin:50px; border-radius:80px 0; height:300px; background:red; position:relative; background:url(https://i.stack.imgur.com/rYeuk.jpg) center/cover; transform:skewY(-7deg); transform-origin:right; overflow:hidden; } .box::before { content:""; position:absolute; background:inherit; top:-20%

问题 Is it possible to set image in same shape with clip-path css. Original Image Expected image with css 回答1: You don't really need clip-path or mask. A skew transformation with border-radius can do it: .box { margin:50px; border-radius:80px 0; height:300px; background:red; position:relative; background:url(https://i.stack.imgur.com/rYeuk.jpg) center/cover; transform:skewY(-7deg); transform-origin:right; overflow:hidden; } .box::before { content:""; position:absolute; background:inherit; top:-20%

问题 I have been trying to achieve the same result as shown in the image with plain CSS. I have tried using a background image (cover...), but it's not responsive (cuts the shape) I managed to get a similar result with clip-path but not the round corners, and also is not supported with all browsers. .shape { background:#16489F; clip-path: polygon(5% 0, 95% 0, 100% 50%, 95% 100%, 5% 100%, 0% 50%); } What I'm aiming for: Thank you very much 回答1: Here is an idea based on this previous answer: .box {

来源： https://stackoverflow.com/questions/62485073/how-to-use-clip-path-property-for-border-in-css

来源： https://stackoverflow.com/questions/62485073/how-to-use-clip-path-property-for-border-in-css

来源： https://stackoverflow.com/questions/62485073/how-to-use-clip-path-property-for-border-in-css

来源： https://stackoverflow.com/questions/62485073/how-to-use-clip-path-property-for-border-in-css

来源： https://stackoverflow.com/questions/62485073/how-to-use-clip-path-property-for-border-in-css