CSS:制作两条包含文本的自定义/交叉线？

Question

我想知道是否有办法在边缘制作这两条十字交叉线。黑框将填充文本。有没有办法在 CSS 中做到这一点？谢谢!

Answer 1

您可以在伪元素上使用渐变背景来制作十字线。

.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/