CODEWITHSUNDEEP
css
Evelyn
Evelyn

Reputation: 43

CSS: Making two custom/criss cross lines embodying text?

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!

Upvotes: 0

Views: 788

Answers (1)

Barbara Laird
Barbara Laird

Reputation: 12717

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/

Upvotes: 1

Related Questions