css - 使用 CSS 在 div 背景中绘制对 Angular 线

Question

我有一个用于预览框的 div:

HTML:

<div class="preview-content">PREVIEW</div>

CSS:

.preview-content {
    background: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAQAAAAECAYAAACp8Z5+AAAAGklEQVQIW2NkYGD4D8SMQAwGcAY2AbBKDBUAVuYCBQPd34sAAAAASUVORK5CYII=) repeat;
    width: 100%;
    min-height: 300px;
    max-height: 300px;
    line-height: 300px;
    text-align: center;
    vertical-align: middle;
     font-size: 2em;
}

问题:如何在div背景中添加对 Angular 线，如图所示？

注意:尽可能使用 CSS

提前谢谢你。

Answer 1

自动缩放到元素尺寸的解决方案是使用 CSS3 线性渐变与 calc() 连接，如下所示。 (这个答案最初描述的 v30+ 版本中的 Chrome 存在一些问题，但看起来它们同时得到了解决，在 v90+ 中它按预期工作)。

.crossed {
     background: 
         linear-gradient(to top left,
             rgba(0,0,0,0) 0%,
             rgba(0,0,0,0) calc(50% - 0.8px),
             rgba(0,0,0,1) 50%,
             rgba(0,0,0,0) calc(50% + 0.8px),
             rgba(0,0,0,0) 100%),
         linear-gradient(to top right,
             rgba(0,0,0,0) 0%,
             rgba(0,0,0,0) calc(50% - 0.8px),
             rgba(0,0,0,1) 50%,
             rgba(0,0,0,0) calc(50% + 0.8px),
             rgba(0,0,0,0) 100%);
}

<textarea class="crossed"></textarea>