The border has the cut edges on the left side. here is my code please tell me what changes I've to make. here is the border I want to make. https://i.stack.imgur.com/h4Lye.png enter code here

 <section >
      <div >
        <div >
          <div >
            <div >
              <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;
}

[1]:

CodePudding user response：

use `::before` Pseudo-Selector

I use the trick of ::before Pseudo Element in CSS, because is Create a New Element with we can style it, to do what you want :)

create a border in your parent element (in my case .container)
get the thickness of the border

example: border: 0.5em solid black; is the 0.5em (you probably have the number is in pixel)

create a ::before or ::after PseudoElement
add the value of thickness of border to the width of ::before
set the parent to position: relative so we can use absolute for the PseudoElement
set the Parent .container to display: grid; so we can easily center this PseudoElement with place-items: center;

now the real trick is here

when you use this lines:

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

Complete Code

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 >
  </div>
</body>

</html>

CodePudding user response：

To make a box like that with a missing segment, this would be one approach, although the linear-gradient might have to be adjust for 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 ><div id = "border-segment"></div></div>

use ::before Pseudo-Selector

now the real trick is here

Complete Code

use `::before` Pseudo-Selector