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

Question

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

Navigation

#1 by (9 votes)
#2 by (3 votes)

2

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

I'vealreadybeenabletodothis:

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>

css

asked by anonymous 13.12.2017 / 18:18

2 answers

9

There are probably better ways to resolve this, perhaps with SVG. But using only CSS, one way is to use the pseudo elements ::after and ::before to create two squares "behind" the div, one in the upper left corner and one 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 the thickness of the border, the smaller the value (the more negative), the thicker the border.

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>

13.12.2017 / 18:47

What is the meaning of this line in Java? Simple solution for Fibonacci algorithm

score 3 · Accepted Answer

I made it as simple as possible, with <div> and positions , and 50% of the side size. 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>