How to make lines intersecting on an edge, with CSS?

Question

someone knows how to make an edge that "leaks" out of the div just like in the picture?

need this cross border of the lower corners , these "xiszinhos" or "cruzinhas"

Thanks in advance

Answer 1

Follows a solution that uses a div to cross-border using pseudo-elements:

.borda {
  display:inline-block; position:relative;
}

.borda:before {
  content:''; display:block; position:absolute;
  height:100%;
  left:4px; right:4px;         /* tamanho horizontal do cruzamento */
  border-left:1px solid #999;
  border-right:1px solid #999;
}

.borda:after {
  content:''; display:block; position:absolute;
  width:100%;
  bottom:4px;                  /* tamanho vertical do cruzamento */
  border-bottom:1px solid #999;
}

img {
  margin:0 25px 25px 25px;     /* tamanho do espaço em branco */ 
  box-shadow:2px 2px 1px #999; /* sombra da imagem            */
}

<div class="borda"><img src="http://i.stack.imgur.com/Fpq5z.png"></div>

If all you need is the edge with space, it’s simpler:

.borda {
  display:inline-block;
  padding:0 25px 25px 25px;    /* zero de espaço em cima, 25px no resto */
  border:1px solid #999;       /* borda em toda a volta */
  border-top:none;             /* menos em cima         */
}

img {
  box-shadow:2px 2px 1px #999; /* sombra da imagem      */
}

<div class="borda"><img src="http://i.stack.imgur.com/Fpq5z.png"></div>

Answer 2

Put it in another div possessed padding and the such border.

* {
    margin:0;
    padding:0;
}
.a {
    border: solid 1px #000;
    box-sizing: border-box;
    display: inline-block;
    padding: 10px;
}
.b {
    background: #F00;
    width: 100px;
    height: 100px;
}

<div class="a">
    <div class="b"></div>
</div>

Or else, look here: http://codepen.io/anon/pen/xVLoYq