javascript - CSS Slanding Div 在图像上的边缘

Question

我正在尝试设计一个简单的报告，格式如下 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。

我会很感激指向正确方向的指针。

Answer 1

丹摸了摸紫色边框。关于倾斜的 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

我们正在向将触发 setBorders() 函数的窗口添加一个'resize' eventListener。在此函数中，我们选择容器元素并将页脚边框的宽度设置为其一半。

为了确保该函数也在初始加载时触发，我添加了一个 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;
}