next.js 用HTML画布或伪元素绘制纸“切”边框

bihw5rsg 于 2023-08-04 发布在其他

关注(0)|答案(3)|浏览(94)

我试图在一些纸面上得到一个非常具体的“新艺术”的结果，因为设计师喜欢让我们受苦。我正在做一个NextJS项目，MUI是我的主要设计解决方案，但后面有很多CSS。
下面是我正在尝试做的（不要介意框架底部的不完美）：

的数据
要实现的主要目标是那些带有“切角”的内边框，但我不能只使用普通图像或.svg，因为它们需要具有特定的颜色和大小。
理想的情况是，它们适合父代的宽度和高度，以便完全响应，因为Paper最终将变成包含文本、图像等的组件。

我如何创建这样的边界？

我的代码结构非常简单：

<div className="mainWrapper">
   <div className="border1">
      // any text or content
   </div>
</div>

字符串

最初，我试图用::after伪元素和clip-path属性来做一些东西，但不幸的是，它不支持边界，并且为了使它响应而进行的计算太复杂了。
我尝试将<canvas>与useRef一起使用（因为我的项目使用SSR，所以我不得不将画布逻辑 Package 在useEffect中），但结果与我尝试做的相差甚远。

next.js

来源：https://stackoverflow.com/questions/76812640/draw-paper-cut-borders-with-html-canvas-or-pseudo-elements

3条答案

按热度按时间

uemypmqf1#

这可以很容易地做到一个后伪元素和线性梯度
超文本标记语言：

<div class="container">Lorem Epsum</div>

字符串
试试这个codepen：
https://codepen.io/Starnas/pen/rNQoXvG?editors=1100

赞(0）回复(0）举报 2023-08-04

kiz8lqtg2#

我有一个在线生成器的困难形状和另一个应该很容易：https://css-generators.com/custom-corners/

.box {
  width: 400px;
  aspect-ratio: 2;
  margin: 50px;
  position: relative;
}
.box:before {
  content: "";
  position: absolute;
  inset: 0;
  background: red;
  clip-path: polygon(0 50.00px,50.00px 0,calc(100% - 50.00px) 0,100% 50.00px,100% calc(100% - 50.00px),calc(100% - 50.00px) 100%,50.00px 100%,0 calc(100% - 50.00px),0 50.00px,3px  calc(50.00px + 1.24px),3px calc(100% - 50.00px - 1.24px),calc(50.00px + 1.24px) calc(100% - 3px),calc(100% - 50.00px - 1.24px) calc(100% - 3px),calc(100% - 3px) calc(100% - 50.00px - 1.24px),calc(100% - 3px) calc(50.00px + 1.24px),calc(100% - 50.00px - 1.24px) 3px,calc(50.00px + 1.24px) 3px,3px calc(50.00px + 1.24px));
}

.box:after {
  content: "";
  position: absolute;
  inset: 10px;
  border: 3px solid red;  
}

个字符

赞(0）回复(0）举报 2023-08-04

mrwjdhj33#

我想我已经找到了一个方法，但它真的很累...（因为CSS而复杂）：

const styles = {
        mainSurface: {
            width: "100%",
            backgroundColor: "blue"
        },
        bordersContainer: {
            backgroundColor: "blue!important",
            content: "''",
            position: "relative"
        },
        borderTL: {
            content: "''",
            position: "absolute",
            height: 32,
            width: 32,
            top: 16,
            left: 16,
            backgroundColor: "transparent",
            borderRight: "4px solid",
            borderColor: "red",
            transform: "rotate(45deg)"
        },
        borderBL: {
            content: "''",
            position: "absolute",
            height: 32,
            width: 32,
            bottom: 16,
            left: 16,
            backgroundColor: "transparent",
            borderTop: "4px solid",
            borderColor: "red",
            transform: "rotate(45deg)"
        },
        borderTR: {
            content: "''",
            position: "absolute",
            height: 32,
            width: 32,
            top: 16,
            right: 16,
            backgroundColor: "transparent",
            borderBottom: "4px solid",
            borderColor: "red",
            transform: "rotate(45deg)"
        },
        borderBR: {
            content: "''",
            position: "absolute",
            height: 32,
            width: 32,
            bottom: 16,
            right: 16,
            backgroundColor: "transparent",
            borderLeft: "4px solid",
            borderColor: "red",
            transform: "rotate(45deg)"
        },

        borderLeft: {
            position: "absolute",
            content: "''",
            height: "calc(100% - 104px)",
            width: 32,
            top: 52,
            backgroundColor: "transparent",
            borderRight: "4px solid",
            borderColor: "red",
        },
        borderRight: {
            position: "absolute",
            content: "''",
            height: "calc(100% - 104px)",
            width: 32,
            top: 52,
            right: 0,
            backgroundColor: "transparent",
            borderLeft: "4px solid",
            borderColor: "red",
        },
        borderTop: {
            position: "absolute",
            content: "''",
            height: 32,
            width: "calc(100% - 104px)",
            top: 0,
            left: 52,
            backgroundColor: "transparent",
            borderBottom: "4px solid",
            borderColor: "red",
        },
        borderBottom: {
            position: "absolute",
            content: "''",
            height: 32,
            width: "calc(100% - 104px)",
            bottom: 0,
            left: 52,
            backgroundColor: "transparent",
            borderTop: "4px solid",
            borderColor: "red",
        },
        contentBox: {
            height: "100%",
            width: "100%",
            py: 6,
            px: 8,
            position: "relative"
        }
    }

    return (
        <>
           <Box sx={styles.mainSurface}>
               <Box sx={styles.bordersContainer}>
                   <Box sx={styles.borderTL}></Box>
                   <Box sx={styles.borderTR}></Box>
                   <Box sx={styles.borderBL}></Box>
                   <Box sx={styles.borderBR}></Box>
                   <Box sx={styles.borderLeft}></Box>
                   <Box sx={styles.borderRight}></Box>
                   <Box sx={styles.borderTop}></Box>
                   <Box sx={styles.borderBottom}></Box>
                   <Box sx={styles.contentBox}>
                       {props.children}
                   </Box>
               </Box>
           </Box>
        </>
    )

字符串
给出这样的东西，干净和响应：
x1c 0d1x的数据
现在，添加另一个“经典”边框框架将更容易。感谢任何人谁试图帮助！我希望这将是有用的其他人在未来！
我会尝试优化它，并最终上传到某处。。

赞(0）回复(0）举报 2023-08-04

我来回答

next.js 用HTML画布或伪元素绘制纸“切”边框

3条答案

相关问题

热门标签

最新问答