Top 50% Edge and Bottom Edge 50% with css, is it possible?

Question

I need to make a <div> two-edged (top and bottom), is it possible to do this with CSS? Or just with image?

I’ve been able to do it like this:

div
{
  width:500px;
  height:500px;   
  position: relative;
  z-index : 1;
}
div:before {
  content : "";
  position: absolute;
  left    : 25%;
  bottom  : 0;
  height  : 1px;
  width   : 50%;
  border-bottom:1px solid magenta;
}
div:after {
  content : "";
  position: absolute;
  right    : 0;
  bottom  : 25%;
  height  : 50%;
  width   : 1px;
  border-right:1px solid magenta;
}

<div>Item 1</div>

Answer 1

There are probably better ways to solve this, perhaps with SVG. But using only CSS, one way is to use pseudo elements ::after and ::before to create two squares "behind" the div, one in the upper left corner and the other in the lower right corner.

(::before)
.-------.
:  .----:-----------.
: |                 |
:.|                 |   
  |       DIV       |-.
  |                 | :
  |                 | :
  '----------:------' :
             '--------'
              (::after)

• heigth and width in div, represent the size of the middle square.
• top, bottom, right, left in pseudo elements define edge thickness, the lower the value (the more negative), the thicker the edge.

div {
  background: #fff;
  position: relative;
  height: 150px;
  width: 150px
}

div::after,
div::before {
  background: orange;
  content: '';
  display: block;
  height: 30%;
  position: absolute;
  width: 30%;
  z-index: -1
}

div::after {
  bottom: -2px;
  right: -2px
}

div::before {
  top: -2px;
  left: -2px
}

/** Regra ñ relacionada, somente p/ melhorar a aparência do exemplo. */
div {justify-content: center; align-items: center; display: flex }

<div>Item1</div>

Answer 2

I made it as simple as possible, with <div> and positions, and 50% of the size on the side. See the code (100% crossbrowser)

.container {
    height: 200px;
    width: 200px;
    position: relative;
}
.b1, .b2, .b3, .b4 {
    background-color: orange;
}
.b1, .b2 {
    width: 1px;
    height: 50%;
    position: absolute;
}
.b3, .b4 {
    width: 50%;
    height: 1px;
    position: absolute;
}
.b1, .b3 {
    top: 0;
    left: 0;
}
.b2, .b4 {
    bottom: 0;
    right: 0;
}

<div class="container">
    <div class="b1"></div>
    <div class="b2"></div>
    <div class="b3"></div>
    <div class="b4"></div>
</div>