Create a box with borders and divisions using HTML

Hello, I am trying to create a box in HTML with a slanted divider line inside. How can I achieve this design?

I am aiming to replicate the layout shown in this image: Link to Image

I have tried implementing the code below, but the alignment is not matching the image:

<div class="box">
      <p style="text-align: left;"><u>Sender</u><br><br>Devka Aryal <br>Lumbini Bookstore <br>Butwal-8, Rupandehi <br>Lumbini, Nepal</p>
      <p style="text-align: right;"><u>Recipient</u><br><br>Mr. Manager <br>Sales Department <br>Brikuti Hall, Kathmandu, Nepal</p>
  </div>
htmlcss

Answer №1

Hopefully this information proves to be helpful!

.box {
  background: #fff;
  border: 1px solid #000;
  box-shadow: inset 0 0 0 4px #fff, inset 0 0 0 8px #000;
  width: 100%; /* Adjust the width accordingly */
  padding: 1em;
  box-sizing: border-box;
  position: relative;
  overflow: hidden;
}
.box::before {
  width: 1px;
  content: "";
  background: #000;
  position: absolute;
  top: 4px;
  left: 50%;
  bottom: 4px;
  transform: skew(45deg)
}
.box .leftSide {float:left;}
.box .rightSide {float:right;}
<div class="box">
  <div class="leftSide"><u>Sender</u><br><br>Devka Aryal <br>Lumbini Bookstore <br>Butwal-8, Rupandehi <br>Lumbini, Nepal</div>
  <div class="rightSide"><u>Receiver</u><br><br>Mr. Mahaprabandhak <br>Sajha Bikri Kaksh <br>Brikuti Mandap, Kathmandu, Nepal</div>
</div>

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

The opacity of each div within a container increases as you move from one div to the

I am striving to craft a series of divs that feature varying levels of opacity in their background colors, creating a gradient effect. In an attempt to achieve this, I utilized a variable linked to the ID of each individual div. Unfortunately, my efforts ...

jquerycssarraysrgba

The input-group-btn is positioned to the right of the field, appearing to float

The input-group-btn for the targetDate field remains fixed on the right side of the input group despite screen width variations until I introduce the automatically generated CSS from the hottowel generator. I require assistance in identifying which aspect ...

javascriptjqueryhtmlcss

How can you determine whether the CSS of a <div> is defined in a class or an id using JavaScript/jQuery?

Hey there, I'm currently working on dynamically changing the CSS of a website. Let's say we have a div like this: <div id="fooid" class="fooclass" ></div> The div has a class "fooclass" and an ID "fooid", and we're getting its ...

javascriptjqueryhtmlcss

Building a multi-form application with HTML5 validation and Vue.js

I am working on a vue.js form that consists of multiple steps and requires HTML5 validation to be simplified. Here is a snippet of the code: <template> <div> <div v-if="activeForm === 1"> <h2> ...

javascripthtmlvalidationvue.js

The jQuery function fails to execute when the script source is included in the head of the document

I'm relatively new to working with scripts and sources, assuming I could easily add them to the header and then include multiple scripts or functions afterwards. Everything seemed to be working fine at first, but now I've encountered a problem th ...

phpjavascriptjqueryhtmlapi

Tips for Preserving the HTML Page State After Making jQuery Changes

Hi there! I am currently working on developing a card game using HTML5, CSS3, and Javascript. This game will communicate with a server built on node.js, facilitated by socket.io for data transmission. One of the key features I am trying to implement is th ...

javascriptjqueryhtmlnode.jssocket.io

PHP tag iteration for unordered list segmentation

My current method of fetching data from MySQL is as shown below: $catmapper = new Application_Model_Mapper_BusinessCategoryMapper(); $result = $catmapper->getBusinessCategory(); To display the results, I use a for loop to iterate through and wrap each ...

phpjqueryhtmlcsshtml-lists

What steps can be taken to ensure that the popover div remains visible when clicking inside it in a "dismissible popover" using Twitter Bootstrap with the data-trigger attribute set to "

I am struggling with a dismissible popover that contains a text box. When I click inside the text box to type, it disappears due to the "data-trigger="focus". Is there a way for the div not to disappear when clicked inside intelligently? Here is the releva ...

javascriptjqueryhtmltwitter-bootstrapbootstrap-popover

Show only the portion of the image where the cursor is currently hovering

Information in advance: You can check out the current code or view the live demo (hover image functionality not included) at . The concept: I would like to have it so that when I hover my cursor (displayed as a black circle) over the image, only the s ...

javascripthtmlcssimagehover

Concentrate on user input in PHP programming

My goal is to create a PHP validation form where errors are displayed correctly every time. However, I am encountering an issue with setting focus on the input field with an error if one occurs. I have variables like $rut_error, $first_name_error, $last_na ...

phphtmlfocus

Tips for sending several values using multiple select input

I am seeking advice on the best way to insert multiple values into a table using a multiple select input that includes more than one value. Would it be better to use a single value separated by "|", or to use data attributes like data-id, data-price, etc? ...

phphtml

Is there a way to create distance between these icons?

<div id="unique-icons"> <a href="#"> <img class="github-logo1" src="GitHub-Mark-64px.png" alt="first github logo"> </a> <a href="#"> <i ...

htmlcssicons

Placing a crimson asterisk beside the input field within Bootstrap

Trying to insert a red * at the end of my input field using bootstrap, but all my attempts so far have been unsuccessful. Is there a way to align the Currently experiencing this issue: https://i.stack.imgur.com/61pzb.png Code snippet: .required-after ...

htmlcsstwitter-bootstrapformsvalidation

An error has been thrown stating that the function startTimer is not defined, despite the fact that it is clearly defined

const startBtn = document.querySelector('.startBtn'); const pauseBtn = document.querySelector('.pauseBtn'); const ResetBtn = document.querySelector('.resetBtn'); const time = document.querySelector('.time'); let sec ...

javascripthtmlsetinterval

How can I use CSS to place a div at the bottom of its container?

I am trying to figure out how to use CSS to position a div at the bottom of its container, but the size of the container is not fixed. Can anyone provide some guidance on this issue? Thank you in advance for helping me solve this problem. You can check o ...

htmlcssbootstrap-4

Adjusting the Size and Spacing of Vuetify's Buttons

Why are buttons extending beyond the card width? https://i.stack.imgur.com/wVRoQ.png I'm facing difficulties customizing the buttons within the cards. I want to eliminate all padding so that the black border perfectly encloses the icon without any un ...

cssvuejs2vuetify.js

Modifying text on input buttons using Javascript

Including product names, text forms, and buttons on a webpage is essential for showcasing products effectively. Each product is assigned an ID such as p1, p2, etc., while the input types are identified by i1, i2, etc. When users enter information into the ...

javascripthtmleventsonclickbuttonclick

Utilize CSS to style active buttons with JavaScript

In an HTML document, the dynamic generation of divs and buttons using JavaScript can be seen in the code snippet below. <div style="background: rgb(247, 247, 247);"> <button class ="xyz" disabled="disabled">Button1</button> </div> ...

jquerycssbuttonapply

Creating a dropdown in HTML that overlaps another div requires using relative and absolute positioning

Having created a navigation bar with dropdown menu items that reveal on hover, I encountered an issue. Below the navigation bar lies a slideshow of images. Whenever I hover over the dropdowns, the slideshow div obstructs the view, making it impossible to s ...

htmlcss

Utilize html5 to drag and drop numerous items effortlessly

Recently, I created a basic HTML5 drag and drop feature using JavaScript. However, I encountered an issue. function allowDrop(ev) { ev.preventDefault(); } function drag(ev) { ev.dataTransfer.setData("text", ev.target.id); } function drop(ev) { ...

javascripthtmldrag-and-drop