An upright section embellished with a mirrored image design on both ends

I am currently working on creating a unique div layout that resembles a piece of paper, similar to this imagehttps://i.sstatic.net/mFq3l.png.

However, I am looking to make it a vertical design with the random curly edges on the left and right sides like in this imagehttps://i.sstatic.net/K51Wd.png. I have been experimenting with the border-image property, but I am facing challenges due to the intricate pattern of the border I want to use.

My current CSS code is as follows:

bg-section {
border-image: url(../images/test.png) 120 round;
border-right: 40px solid transparent;
border-left: 40px solid transparent;
width: 70%;
margin: auto;
linear-gradient(rgba(199,194,183,0.2), rgba(199,194,183,0));
}

I am aiming to utilize a border design similar to this imagehttps://i.sstatic.net/4OjAW.png.

htmlcssborderborder-image

Answer №1

To change the orientation of the image, you can utilize various tools and set it as the background while relying on repeat:

body {
  min-height:800vh;
  margin:0;
  background:
    url(https://i.sstatic.net/rFPJV.png) right repeat-y,
    url(https://i.sstatic.net/uMYNC.png) left repeat-y,
    linear-gradient(green,green) center / calc(100% - 138px) 100% no-repeat;
    
}

Alternatively, you can employ the same image, use a pseudo-element, and utilize transform to rotate the image. Additionally, you have the flexibility to manage the width of the borders easily:

body {
  min-height:800vh;
  margin:0;
  position:relative;  
  background:linear-gradient(green,green) center / calc(100% - 50px) 100% no-repeat
}
body:before,
body:after {
  content:"";
  position:absolute;
  top:0;
  bottom:0;
  width:20px; /*Control the width of the border*/
  background: url(https://i.sstatic.net/rFPJV.png) center/contain  repeat-y
}
body:before {
  right:10px;
}
body:after {
  left:10px;
  transform:scale(-1,1);
}

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Migration of Bootstrap Template to ASP.NET 4.5 Forms and Addressing Rendering Problems with Full Width Display

is a Bootstrap Template that I purchased and incorporated into my project. After migrating it to an ASP.NET 4.5 Web Forms setup, I encountered issues with the LayerSlider and Footer not rendering correctly in full width as they did on the original template ...

htmlcssasp.nettwitter-bootstrap

Is there a way to convert various elements sharing the same class into a list of array items?

Essentially, I am dealing with multiple elements sharing the same class name. My goal is to retrieve an array of integers from an API and then iterate through each element with this class name, replacing them with elements from the array sequentially. For ...

javascripthtmlarraysclassweb

issues with the handler not functioning properly in html and javascript

<form method="post" action="."> <label class="input-label">Enter Your First Name</label><input field="first_name" class="input-edit" maxlength="30" type="text" value="{{ user.first_name }}" /> <label class="i ...

javascripthtml

Leveraging the p-steps module from PrimeNG for smaller screen sizes

I am facing an issue with resizing the p-steps component from PrimeNG to avoid overflow in smaller screen resolutions. The current code I am using is as follows: <div class="d-flex card mb-4"> <p-steps [model]="items" ...

htmlangularprimeng

React Download Button: Easy way to offer file downloads on

I am trying to create a download button for users to download zip files from Cloudinary using React. I have attempted different methods to implement this feature, but so far, I have been unsuccessful. Whenever I click on the button, it modifies the route i ...

htmlreactjsjsxcloudinary

Animate the toggling of classes in jQuery

Here is a code snippet that I came across: $('li input:checked').click(function() { $(this).parent().parent().toggleClass("uncheckedBoxBGColor", 1000); }); This code is functioning correctly when the element is clicked for the first time. I ...

javascriptjqueryhtmlcss

Does the same rule apply in a CSS file for <variable name="key" value="#576767">?

While examining the HTML code of my blog, I came across a CSS variable declared in CDTA within the index.html file. <![CDATA[ <Variable name="keycolor" description="Main Color" type="color" default="#2196f3" ...

cssbloggercdata

The dilemma of selecting objects in Three.js

Currently, I am developing a small web application that utilizes three.js. However, I have encountered an issue: I created a prototype with my three.js content and everything functions correctly (the canvas size in the prototype matches the browser window ...

javascripthtmlthree.js

Creating a table with a tableHead cell comprised of multiple components in ReactJS/CSS using Material UI

It's possible that the title lacks description. I am attempting to generate a table with a specific layout like this https://i.sstatic.net/T97C2.gif Essentially, the "Average" cell is combined with two smaller cells for "height" and "width," which c ...

htmlcssreactjsmaterial-ui

I am unable to see the text field when I use element.text. What could be the reason for this

As I work on collecting online reviews using Selenium Chrome Webdriver, I've encountered a challenge with TripAdvisor. The reviews are truncated and require clicking a "More" button to view the complete text. Within the html code, there is a class cal ...

pythonhtmlseleniumweb-scraping

Creating and launching multiple tabs in node.js (cloud9 IDE): A step-by-step guide

I am currently working on a choice provider. This program will take a (choice) program with a variable number of choices. For example: Let's say we want to make a coffee with two choices - 1. <light, dark> ...

htmlnode.jstabssocket.iocloud9-ide

Why does the appearance of my PHP spreadsheet change when I attempt to print it?

After using a CSS stylesheet to position my textboxes correctly, I noticed that in Chrome everything appeared fine. However, when attempting to print the site (Ctrl+P), each sentence and textbox shifted. How can I ensure they remain in place? <!-- #cap ...

phpcssprinting

The margin in the DIV is not aligning correctly with the specified requirements

I encountered a puzzling issue with a small problem, and I am certain that I must be making a mistake somewhere. I experimented with two divs styled using different CSS. <div id="main"> <div id="internal"> hello </div> < ...

htmlcss

The Americanpurpose1 font family features playful smiley faces when special characters such as parentheses and hashtags are used

I have utilized the font family americanpurpose1 for my current project, however, I am encountering issues where special characters such as (), #, etc. are displaying as Smiley faces. I have attempted to use HTML symbol codes to resolve this problem, but u ...

htmlcssfont-family

What are the benefits of sticking with Express versus transitioning to a combination of JavaScript and HTML?

Recently, I've been developing a web application that involves taking user input to make modifications to files on the server side. The main logic for this project is built in node.js and operates via command line, with the rest of the site being deve ...

javascripthtmlnode.jsexpress

What is the best way to submit your CSS feature suggestions?

Is there a designated platform for submitting CSS feature requests officially? I am interested in proposing the addition of an 'inset' keyword to the text-shadow property for creating inset text shadows. This enhancement seems consistent with th ...

css

Is it possible to create an HTML textarea that supports HTML formatting?

Is it possible to have HTML tag support in an HTML textarea within a form, similar to what is seen on Stack Overflow when asking a question? I would like to be able to capture the user's input in a textarea using PHP and print exactly what the user ty ...

phphtmltextarea

having difficulties in separating the mat-table header

It may seem like a basic question, but I'm having trouble figuring it out. I'm not sure if this requires a CSS change or something else. I'm looking to add a divider between my table header similar to the one highlighted in the screenshot be ...

cssangularangular-material

Imitate a style using jQuery without deleting other elements

This is an example of HTML code: <div id="id1" style="width:100px;background: rgb(196, 14, 14);">1</div> <div id="id2" style="margin-top:10px">2</div> to <div id="id1" style=&qu ...

javascriptjqueryhtml

a basic three-tier flexible design with alignment to the lower right side

I am looking to create a dynamic header that adjusts based on the height of the svg logo and available width for the navigation: layout1: https://i.sstatic.net/Oa8gB.png If there is not enough space for all navigation buttons (a) to fit in one row next t ...

csshtmllayoutsvgflexbox