在CSS背景中绘制对角线 [英] draw diagonal lines in div background with CSS

问题描述

我有预览框的div

HTML：

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

CSS：

 code> .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背景中添加对角线>

注意：仅在可能的情况下使用CSS

h2_lin>解决方案

您可以这样做：

 < style& 
 .background {
 background-color：#BCBCBC; 
 width：100px; 
 height：50px; 
 padding：0; 
 margin：0 
} 
 .line1 {
 width：112px; 
 height：47px; 
 border-bottom：1px solid red; 
 -webkit-transform：
 translateY（-20px）
 translateX（5px）
 rotate（27deg）; 
 position：absolute; 
 / * top：-20px; * / 
} 
 .line2 {
 width：112px; 
 height：47px; 
 border-bottom：1px solid green; 
 -webkit-transform：
 translateY（20px）
 translateX（5px）
 rotate（-26deg）; 
 position：absolute; 
 top：-33px; 
 left：-13px; 
} 
< / style> 
< div class =background> 
< div class =line1>< / div> 
< div class =line2>< / div> 
< / div> 
  

这里是 jsfiddle 。

改进版本的 answer < a>为您的目的。

I have div for preview box

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;
}

Q: how to add diagonal lines to div background like in picture

note: with CSS only if possible

Thank you in advance

解决方案

You can do it something like this:

<style>
    .background {
        background-color: #BCBCBC;
        width: 100px;
        height: 50px;
        padding: 0; 
        margin: 0
    }
    .line1 {
        width: 112px;
        height: 47px;
        border-bottom: 1px solid red;
        -webkit-transform:
            translateY(-20px)
            translateX(5px)
            rotate(27deg); 
        position: absolute;
        /* top: -20px; */
    }
    .line2 {
        width: 112px;
        height: 47px;
        border-bottom: 1px solid green;
        -webkit-transform:
            translateY(20px)
            translateX(5px)
            rotate(-26deg);
        position: absolute;
        top: -33px;
        left: -13px;
    }
</style>
<div class="background">
    <div class="line1"></div>
    <div class="line2"></div>
</div>

Here is a jsfiddle.

Improved version of answer for your purpose.

这篇关于在CSS背景中绘制对角线的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！