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:

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:

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

Trouble integrating NextJS API routes with Firebase Hosting

"Modifying the height of an SVG <g> element: A step-by

Looking for a Search Field that clears default text when focused - Compatible with Firefox 3.6?

Tips for mastering web design techniques

How to Filter Fields in AngularJS Based on a Start Date and End Date?

The magic of CSS's 3D Transformation feature

Safari: Fixed-positioned DIVs staying put after DOM updates

Optimal technique for serializing variables containing Date objects in Next.js while preserving their data type

Alignment of text to the left can be achieved by using either relative or absolute

Steps to Properly Flush the DOM When the Page is Updated

Designing a nested box layout with bootstrap HTML/CSS styling

Using next.js with GraphQL resulted in the following error: "Invariant Violation: Unable to locate the "client" in the context or passed in as an option..."

"Refreshing the page with Next.js version 13.5 by clicking on the link

Unlocking the Power of Transition: Effortlessly Submitting a Form Post

Prior to stacking the divs, separate the line within the div

The dropdown menu is being truncated

Flipping a 2-dimensional box using CSS and incorporating cascading flex divs

What is the best way to implement this design using CSS flexbox?

Tips for Incorporating HTML Code into an ASP Button's Text Attribute

Uploading multiple images using Next.js