2

Preciso fazer uma <div> que tenha duas bordas (top e bottom), é possível fazer isso com o CSS? Ou só com imagem mesmo?

imagem de exemplo

Já consegui fazer assim:

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>

2
  • Quer fazer só com css? vc poderia criar as divs bordas e mover a posição delas
    – N. Dias
    13/12/2017 às 17:45
  • pode mde dar um exemplo? 13/12/2017 às 17:48

2 Respostas 2

9

Provavelmente existem formas melhores de resolver isso, talvez com SVG. Mas utilizando somente CSS, uma forma é utilizar os pseudo elementos ::after e ::before para criar dois quadrados "atrás" do div, um no canto superior esquerdo e outro no canto inferior direito.

(::before)
.-------.
:  .----:-----------.
: |                 |
:.|                 |   
  |       DIV       |-.
  |                 | :
  |                 | :
  '----------:------' :
             '--------'
              (::after)
  • heigth e width em div, representam o tamanho do quadrado do meio.
  • top, bottom, right, left nos pseudo elementos definem a espessura da borda, quanto menor o valor (mais negativo), mais grossa será a borda.

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>

3

Fiz do jeito mais simples possível, com <div> e positions, e 50% do tamanho do lado. Veja o código (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>

Você deve fazer log-in para responder a esta pergunta.

Esta não é a resposta que você está procurando? Pesquise outras perguntas com a tag .