0

http://i57.tinypic.com/30c66hy.png

I was wondering if there's a way to make these two criss cross lines on the edges. The black box will be filled with texts. Is there anyway to do this in CSS? Thank you!

j08691
  • 204,283
  • 31
  • 260
  • 272
Evelyn
  • 43
  • 1
  • 2
  • 8
  • To all the downvoters and close-voters: George Stocker♦ and Shog9♦ have stated that questions like these are apparently on topic and allowed; see [this question](http://stackoverflow.com/questions/28673567/how-do-i-draw-an-incomplete-circle-with-css) and the related [Meta discussion](http://meta.stackoverflow.com/questions/286757/is-it-always-a-good-idea-to-demand-the-op-post-some-code/286760#286760) – LittleBobbyTables - Au Revoir Mar 03 '15 at 20:49
  • sorry i'm really new to css so i'm not even sure how to approach this problem. – Evelyn Mar 03 '15 at 20:58

1 Answers1

1

You could use a gradient background on pseudo elements to make the cross lines.

.border {
    width:80%;
    margin:2em auto;
    padding:2em;
    position:relative;

}
.border::before {
    content:'';
    position:absolute;
    left: -10px;
    top:-10px;
    width: 100px;
    height: 100px;
    background: linear-gradient(to bottom, transparent 24px, #ddd 24px, #ddd 26px, transparent 26px), linear-gradient(to right, transparent 24px, #ddd 24px, #ddd 26px, transparent 26px);
}
.border::after {
    content:'';
    position:absolute;
    width: 100px;
    height: 100px;
    right:-10px;
    bottom:-10px;
    background: linear-gradient(to bottom, transparent 74px, #ddd 74px, #ddd 76px, transparent 76px), linear-gradient(to right, transparent 74px, #ddd 74px, #ddd 76px, transparent 76px);
}

http://jsfiddle.net/e9dwbdyn/1/

Barbara Laird
  • 12,599
  • 2
  • 44
  • 57