To view the border design I have in mind, please click on the provided link

Question

To view the border design I have in mind, please click on the provided link

The edges of the border are cut on the left side. This is the specific border design I am aiming for:

Here is my current code, what alterations should I implement?

 <section class="started">
      <div class="container">
        <div class="row">
          <div class="col-3">
            <div class="box1 text-center">
              <h3>All started in 1956</h3>
              <h3>A fresh breeze of modern furniture in town!</h3>
            </div>
          </div>
        </div>
      </div>
    </section>
.box1 {
  height: 300px;
  background: #fff;
  position: relative;
}

.box1:before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  border-top: 12px solid #000000;
  border-left: 12px solid #000000;
  border-right: 12px solid #000000;
  border-bottom: 12px solid #000000;
  width: 0;
}

html css

Answer 1

Answer №1

Utilizing the `::before` Pseudo-Selector in CSS

I have employed the clever technique of utilizing the `::before` Pseudo Element in CSS, which allows us to generate a new element that can be styled according to our preferences.

Create a border for your parent element (in my case, `.container`)
Determine the thickness of the border

For instance, if you have border: 0.5em solid black;, the value of 0.5em is what you would use (it may be in pixels).

Add a ::before or ::after PseudoElement
Set the width of the ::before element to match the border thickness
Apply position: relative to the parent element so we can utilize absolute positioning for the PseudoElement
Use display: grid; on the parent element `.container` for easy centering using place-items: center;

The key trick lies here:

When implementing these lines:

background-color: white;
position: absolute;
left: -0.5em;
width: 0.5em;

Complete Code Snippet

body {
    display: grid;
    place-items: center;
    min-height: 100vh;
}

.container {
    height: 80vh;
    width: 80vw;
    border: 0.5em solid black;
    position: relative;
    display: grid;
    place-items: center;
}

.container::before {
    content: "";
    background-color: white;
    position: absolute;
    left: -0.5em;
    height: 40vh;
    width: 0.5em;
}

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8>
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <link rel="stylesheet" href="style.css">
</head>

<body>
    <div class="container">
    </div>
</body>

</html>

Answer 2

Utilizing the `::before` Pseudo-Selector in CSS

I have employed the clever technique of utilizing the `::before` Pseudo Element in CSS, which allows us to generate a new element that can be styled according to our preferences.

Create a border for your parent element (in my case, `.container`)
Determine the thickness of the border

For instance, if you have border: 0.5em solid black;, the value of 0.5em is what you would use (it may be in pixels).

Add a ::before or ::after PseudoElement
Set the width of the ::before element to match the border thickness
Apply position: relative to the parent element so we can utilize absolute positioning for the PseudoElement
Use display: grid; on the parent element `.container` for easy centering using place-items: center;

The key trick lies here:

When implementing these lines:

background-color: white;
position: absolute;
left: -0.5em;
width: 0.5em;

Complete Code Snippet

body {
    display: grid;
    place-items: center;
    min-height: 100vh;
}

.container {
    height: 80vh;
    width: 80vw;
    border: 0.5em solid black;
    position: relative;
    display: grid;
    place-items: center;
}

.container::before {
    content: "";
    background-color: white;
    position: absolute;
    left: -0.5em;
    height: 40vh;
    width: 0.5em;
}

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8>
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <link rel="stylesheet" href="style.css">
</head>

<body>
    <div class="container">
    </div>
</body>

</html>

Answer 3

Answer №2

If you want to create a box with a missing segment, one way to achieve this is by using the following CSS code. However, please note that the linear-gradient may need adjustments for better browser compatibility.

.box {
  position:relative;
  border-top: 1px solid #000000;
  border-left: 1px solid #000000;
  border-right: 1px solid #000000;
  width: 100px;
  height:100px;
}
#border-segment {
  position:absolute;
  bottom:0px;
  height:1px;
  width:100%;
  
  background: -moz-linear-gradient(left, #000000 0%, #000000 33%, #FFFFFF 33%, #FFFFFF 66%, #000000 66%, #000000 100%);
}

<div class="box"><div id = "border-segment"></div></div>

Answer 4

If you want to create a box with a missing segment, one way to achieve this is by using the following CSS code. However, please note that the linear-gradient may need adjustments for better browser compatibility.

.box {
  position:relative;
  border-top: 1px solid #000000;
  border-left: 1px solid #000000;
  border-right: 1px solid #000000;
  width: 100px;
  height:100px;
}
#border-segment {
  position:absolute;
  bottom:0px;
  height:1px;
  width:100%;
  
  background: -moz-linear-gradient(left, #000000 0%, #000000 33%, #FFFFFF 33%, #FFFFFF 66%, #000000 66%, #000000 100%);
}

<div class="box"><div id = "border-segment"></div></div>

To view the border design I have in mind, please click on the provided link

Answer №1

Utilizing the `::before` Pseudo-Selector in CSS

The key trick lies here:

Complete Code Snippet

Answer №2

Similar questions

Switch the div class when clicked, and revert it when the body is clicked

Maintaining responsiveness, CSS grid will automatically adjust the height of each element to be equal

What is the best way to hide only the rows in a table when it is clicked using JavaScript?

Tips for preventing background scrolling of a Fixed element in React

Using inline-block in CSS for layout purposes

Extract content from whole webpage including HTML, CSS, and JavaScript

Table on the absolute position within an overflow scroll container

The tabs are visible in the drawer, but the transition is not occurring

Is there a way to make my Bootstrap carousel display three cards at a time in a continuous cycle?

Extracting information from a checkbox list displayed within an HTML table

The background image on my website isn't showing up once it's been deployed via GitHub

Is there a way to replicate the data from one canvas onto another canvas using getContext('webgl')?

What's the process for browsers to render the 'span' element?

Adjust the size of an image to fit next to a separate division within a larger division

arranging the table within the div

Unusual actions exhibited by GestureEvent.rotation in iOS webkit browsing

Attempting to initiate a CSS animation by clicking a button using JavaScript

Embed an external website within a div element

VBA: A guide to interacting with elements inside an iframe

The issue of jQuery CSS positioning failure in Chrome/Opera