我正在尝试设计一个简单的报告,其格式如下Figma file所示使用 React 和 Material UI。然而,在设计报告中所示的 div 的倾斜边缘时,我遇到了挑战。再加上紫色边框。这是我到目前为止所做的,但还远未达到完美:
const leftDiv = {
content: "",
position: "absolute",
top: "50%",
right: 0,
width: "100%",
height: "50%",
backgroundColor: 'rgb(255, 255, 255)',
clipPath: "polygon(0 0, 0% 0%, 100% 100%, 0% 100%)"
}
const rightDiv = {
position: "absolute",
bottom: 0,
right: 0,
display: 'inline-block',
width: 0,
height: 0,
borderStyle: 'solid',
borderWidth: '0 0 500px 100vw',
borderColor: 'transparent transparent #FFFFFF transparent',
}
const contentDiv = {
backgroundColor: 'rgb(255, 255, 255)',
width: "100%",
height: "100%",
clipPath: "polygon(100% 0, 100% 0%, 100% 100%, 0% 100%)"
}
const Coverpage = () => {
return (
<Container>
<Grid>
<Paper>
<Box sx={{ position: 'relative', width: '100%' }}>
<CardMedia
component='img'
alt="cover page image"
image='https://unsplash.com/photos/vbxyFxlgpjM'
/>
<Box style={leftDiv}></Box>
<Box style={rightDiv}>
<Box style={contentDiv}>
<Box sx={{ width: '100%', height: '100%', display: 'flex', flexDirection: 'column', justifyContent: 'flex-end', alignItems: 'flex-end', textAlign: 'right', pr: 8 }}>
<Typography sx={{ fontSize: '24px', mb: 2 }}>Lorem ipsum</Typography>
<Typography sx={{ fontSize: '48px', fontWeight: 'bold', textTransform: 'uppercase', color: '#000133' }}>Lorem ipsum</Typography>
<Typography sx={{ fontSize: '64px', fontWeight: 'bold', textTransform: 'uppercase', color: 'blue' }}>Lorem ipsum</Typography>
</Box>
</Box>
</Box>
</Box>
</Paper>
</Grid>
</Container>
);
}
export default Coverpage;
我发现使用clipPath是最简单的,尽管我更喜欢使用三 Angular 形来设计倾斜边缘,因为后来我计划使用react-pdf-renderer
,我不确定它是否可以在 CSS 样式中支持 ClipPath。
如果有人指出正确的方向,我将不胜感激。
最佳答案
丹触摸了紫色边框。关于倾斜的div,你可以使用这个技巧:
.slanted{
height: 0;
width: 0;
border-top: solid 100px transparent;
border-right: solid 50vw blue;
border-left: solid 50vw blue;
border-bottom: solid 100px blue;
}
您正在制作一个没有高度或宽度的 div。边框沿对 Angular 线相交,因此可以产生三 Angular 形效果。
您可以为文本使用额外的 div
编辑:使边框响应
要使边框技巧动态化,您可以使用一些 JS:
function App() {
const footerRef = React.useRef()
useEffect(() => {
window.addEventListener('resize', setBorders)
return () => {
window.removeEventListener('resize', setBorders)
}
}, [])
useEffect(() => {
if (!footerRef.current) return
setBorders()
}, [footerRef])
const setBorders = () => {
let containerWidth = document.querySelector('.container').clientWidth
let footerStyle = footerRef.current.style
footerStyle.borderRightWidth = containerWidth/2+'px'
footerStyle.borderLeftWidth = containerWidth/2+'px'
}
return (
<div className='App'>
<div className='container'>
<div className='footer' ref={footerRef}>
</div>
</div>
</div>
);
}
export default App
我们正在向窗口添加一个'resize'事件监听器,它将触发setBorders()函数。在此函数中,我们选择容器元素并将页脚边框的宽度设置为其一半。
为了确保该函数也在初始加载时触发,我添加了一个 useEffect ,它将在创建页脚并设置其 Ref 时触发。您还可以使用callback ref相反。
CSS,我假设页脚将是静态高度:
.container{
height: 200px;
width: 100%;
background: red;
}
.footer{
position: relative;
height: 0;
width: 0;
top: calc(100% - 100px);
/*border-top width + border-bottom width = 100px*/
border-top: 50px solid transparent;
border-bottom: 50px solid green;
border-right: solid blue;
border-left: solid blue;
}
如果您不介意使容器position:relative;,您可以这样做:
.footer{
position: absolute;
bottom: 0;
}
关于javascript - CSS Slanding Div 边缘在图像上,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/73648714/