Create paper "cut" borders using HTML canvas or pseudo-elements

Question

Create paper "cut" borders using HTML canvas or pseudo-elements

As a designer with a penchant for pain, I am striving to achieve an "art nouveau" aesthetic on paper for my NextJS project with MUI as the main design solution. Despite the abundance of CSS in the background, I am faced with the challenge of creating inner borders with "cut corners" that must have specific colors and sizes.

I want these borders to adapt to their parent's width and height for full responsiveness, as the Paper will eventually serve as a container for text, images, and more.

How can I create such borders?

My current code structure is straightforward:

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

Initially, I experimented with the ::after pseudo-element and the clip-path property, but found it challenging to make it responsive while also supporting borders...
I then attempted to utilize the <canvas> element with useRef due to my SSR setup, but the outcomes fell short of my desired result...

css canvas next.js css-selectors border

Answer 1

Answer №1

You can achieve this effect using just a single after pseudo-element and linear gradients.

Below is the HTML code snippet:

<div class="box">Lorem Ipsum</div>

Feel free to test it out on this Codepen link:

https://codepen.io/UniqueCoder/pen/jPzKwA?editors=1100

Answer 2

You can achieve this effect using just a single after pseudo-element and linear gradients.

Below is the HTML code snippet:

<div class="box">Lorem Ipsum</div>

Feel free to test it out on this Codepen link:

https://codepen.io/UniqueCoder/pen/jPzKwA?editors=1100

Answer 3

Answer №2

If you're struggling with a complex shape, I have just the solution for you! Check out this online generator for custom corners that will make your life easier:

.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;  
}

<div class="box"></div>

Answer 4

If you're struggling with a complex shape, I have just the solution for you! Check out this online generator for custom corners that will make your life easier:

.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;  
}

<div class="box"></div>

Answer 5

Answer №3

After much effort and complexity due to CSS, I believe I have discovered a method:

    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)"
        },
        ...(remaining code remains the same)
    }

    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>
        </>
    )

This approach results in a clean and responsive design, as illustrated here:

https://i.sstatic.net/9RGIW.png

I am grateful for all attempted assistance! Hopefully, this solution proves helpful to others in the future.

I plan to further optimize and share this code at a later time...

Answer 6

After much effort and complexity due to CSS, I believe I have discovered a method:

    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)"
        },
        ...(remaining code remains the same)
    }

    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>
        </>
    )

This approach results in a clean and responsive design, as illustrated here:

https://i.sstatic.net/9RGIW.png

I am grateful for all attempted assistance! Hopefully, this solution proves helpful to others in the future.

I plan to further optimize and share this code at a later time...

Create paper "cut" borders using HTML canvas or pseudo-elements

Answer №1

Answer №2

Answer №3

Similar questions

What is the best way to center the input on the page?

Dealing with the mystery of the Next.js Stripe webhook elusive function error

Encountering a issue when trying to render an image retrieved from an API in Next JS

Is there a way to create a layout with a row containing two columns and another row with just one column using MUI Grid?

What steps should be taken to acquire the most recent CSS files for a theme?

Best practices for retrieving information from the user interface

Using Javascript to display an element when scrolling within a specific container and each item of an array reaches the top

Is there a way to change the route in nextjs without causing a refresh?

Resetting initial values with Velocity.js post-animation

Issue with CSS File not being recognized by React Component

Customizing form validation in React using Zod resolver for optional fields

Elements inside the Bootstrap 3 navbar are actually external

Improving efficiency of basic image carousel in Angular 8

Does the padding and margin of an element alter when the position is set to relative?

Struggling to float <aside> to the left of <article> for proper alignment?

Proper HTML style linking with CSS

What is the best way to make a hyperlink in HTML open in the same page or window, without relying on the <iframe> tag or JavaScript?

How to Prevent Scrolling When Modal is in Use on Full Page JS

Create a radial-gradient() that covers two separate elements

Try utilizing an image to hold text content rather than a traditional div container