我正在嘗試使用 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 是最簡單的，盡管我更喜歡使用三角形來設計傾斜邊緣，因為后來我打算使用react-pdf-renderer它，但我不確定它是否在 CSS 樣式中支持 clipPath。
我將不勝感激指向正確方向的指標。
uj5u.com熱心網友回復：
丹摸了摸紫色的邊框。關于傾斜的 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。邊界沿對角線相交，因此您可以產生三角形效果。
您可以為文本使用額外的 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
我們正在向將觸發setBorders()函式的視窗添加一個“調整大小”事件監聽器。在這個函式中，我們選擇容器元素并將頁腳邊框的寬度設定為它的一半。
為了確保該函式在初始加載時也會觸發，我添加了一個useEffect，它將在創建頁腳并設定其Ref時觸發。您也可以改用回呼 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;
}
如果您不介意制作容器位置：relative; 然后你可以這樣做：
.footer{
position: absolute;
bottom: 0;
}
uj5u.com熱心網友回復：
您只需要在元素上使用簡單的 CSS 轉換。
transform: skew(-15deg, -15deg);
轉載請註明出處，本文鏈接：https://www.uj5u.com/yidong/506977.html