css Question posted in
Some basic documentation can be found here.

Css – How to create border as per attached image

pseudo border image

I want the borders connecting the checkboxes.

I tried with pseudo borders, but was having difficulty in setting height as website is responsive for different screens.

Can anyone suggest a way to handle it for responsive screens.

body {
  display: flex;
  justify-content: center;
  align-items: center;
  height: 100vh;
  overflow: hidden;
}
.parent {
  border-left: 3px dashed black;
  display: flex;
  flex-wrap: wrap;
  flex-direction: column;
}

.child {
  display: flex;
  flex-direction: column;
}

input {
  width: 2rem;
  height: 2rem;
}

.child input {
  position: relative;
  display: flex;
  justify-content: center;
  align-items: center;
  margin-left: 4rem;
}

.child input::before {
  content: '';
  position: absolute;
  left: -4rem;
  border: 2px dashed black;
  width: 100%;
}
<div class="parent">
    <div>
      <input type="checkbox" />
      <div class="child">
        <input type="checkbox">
        <input type="checkbox" />

      </div>
    </div>
  </div>
Tags:

2

Answers


  1. 0

    Try using border-style: dashed and ::before pseudo-element in this way:

    body {
  display: flex;
  justify-content: center;
  align-items: center;
  height: 100vh;
  overflow: hidden;
}

.parent {
  display: flex;
  flex-direction: column;
  justify-content: start;
}

.child1 {
  width: 100%;
}

.child2 {
  display: flex;
  flex-wrap: wrap;
  justify-content: start;
  align-items: center;
  border-left: 3px solid black;
  border-top: 0px;
  border-right: 0px;
  border-bottom: 0px;
  border-style: dashed;
  height: 10rem;
  width: 10rem;
}

.inp1 {
  position: relative;
  display: flex;
  justify-content: start;
  align-items: center;
  width: 2rem;
  height: 2rem;
  margin-left: -0.85rem;
  margin-bottom: -0.05rem;
}

.inp2 {
  position: relative;
  display: flex;
  justify-content: start;
  align-items: center;
  width: 2rem;
  height: 2rem;
  margin-left: 4rem;
}

.inp2::before {
  content: '';
  position: absolute;
  left: -4rem;
  border: 2px solid black;
  border-style: dashed;
  width: 60px;
}
    <div class="parent">
  <div class="child1">
    <input type="checkbox" class="inp1" />
  </div>

  <div class="child2">
    <input type="checkbox" class="inp2" />
    <input type="checkbox" class="inp2" />
  </div>
</div>
    Login or Signup to reply.
  2. 0

    The first thing you want to do is start with semantic HTML. Then, you can use pseudoelements with gradient backgrounds to make the dashed lines.

    Now, much of this is quite fragile. For example, it relies on magic numbers to get things lined up, which depends on the font and size of the checkbox. In the future, anchor positioning may be able to help, but for now, to really get it right, I’d suggest using SVG or canvas to draw the lines based on the positions of the elements.

    That said, here’s a quick attempt at doing it all with CSS.

    ul {
    padding: 0;
    list-style-type: "";
    --dash-color: lightgray;
    --dash-length: 3px;
    --dash-gap: 5px;
}

ul ul {
    --nested-list-indent: 20px;
    padding-inline-start: var(--nested-list-indent);
}

li {
    position: relative;
    display: flex;
    align-items: start;
    --column-gap: .5ch;
    column-gap: var(--column-gap);
}

.li-content {
}

li input[type="checkbox"] {
    translate: 0 -.14rem;
}

li::before {
    display: block;
    content: "";
    position: absolute;
    inset-block: .5rem;
    inset-inline-start: .64rem;
    width: 2px;
    background-image: repeating-linear-gradient(
        to bottom,
        var(--dash-color),
        var(--dash-color) var(--dash-length),
        transparent var(--dash-length),
        transparent calc(var(--dash-length) + var(--dash-gap))
    );
}

li li::before {
    width: calc(var(--nested-list-indent) + var(--column-gap) + 1rem);
    height: 2px;
    inset-inline-start: calc(-1 * var(--nested-list-indent) - var(--column-gap) - .5rem);
    background-image: repeating-linear-gradient(
        to right,
        var(--dash-color),
        var(--dash-color) var(--dash-length),
        transparent var(--dash-length),
        transparent calc(var(--dash-length) + var(--dash-gap))
    );
}

hr {
    border: none;
    background-image: repeating-linear-gradient(
        to right,
        var(--dash-color),
        var(--dash-color) var(--dash-length),
        transparent var(--dash-length),
        transparent calc(var(--dash-length) + var(--dash-gap))
    );
    height: 2px;
}
    <ul>
    <li>
        <input id="ee" name="ee" type="checkbox" checked>
        <div>
            <label for="ee">Electronic Equipment</label>
            <p>Lorem ipsum, dolor sit amet consectetur adipisicing elit. Illo in consectetur doloribus quam, rem magnam dicta autem voluptate dolor delectus.</p>
            <hr>
            <p>Lorem ipsum dolor sit amet consectetur adipisicing elit.</p>
            <ul>
                <li>
                    <input id="ec" name="ec" type="checkbox">
                    <label for="ec">Escalation Clause</label>
                </li>
                <li>
                    <input id="ef" name="ef" type="checkbox">
                    <label for="ef">Express Freight</label>
                </li>
            </ul>
        </div>
    </li>
</ul>
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search