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

Asked

Viewed 392 times

9

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

inserir a descrição da imagem aqui

inserir a descrição da imagem aqui

2 answers

16


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>

  • noticed that the . edge:before it blocks the click of anything inside the div. I have <a> tags inside the div that are locked as if something was on top, when I remove . edge:before it works. You know what can be?

  • I was able to solve the click problem. I put my links inside a div with relative position. Personal thanks

  • 1

    @Alexmartins you can put Pointer-Events:No before and after, then they become transparent pro click. is that I usually imagined that the click would be on the whole div, and not only on the image, so I didn’t put it. I think for the user it is better your solution to put the anchor off the edge, there it is more accessible.

3

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

  • 2

    I think he’s talking about that little crossword.

  • 1

    Because @Bruno. If it really is, you can’t tell by the question.

  • 1

    It’s true, the question is too incomplete.

  • 1

    Personal sorry if I did not make myself understood completely , but that’s right, I need this cross edge of the lower corners , these "xiszinhos"

Browser other questions tagged

You are not signed in. Login or sign up in order to post.