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背景中，如图片

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

preview

提前谢谢

Answer 1

几乎完美的解决方案，自动缩放到元素的尺寸将使用与calc（）连接的CSS3线性渐变，如下所示。主要缺点当然是兼容性。下面的代码适用于Firefox 25和资源管理器10和11，但在Chrome中（我已经测试过v30和v32开发版），如果线条太窄，会出现一些细微的问题。此外，消失取决于框尺寸 - 下面的样式适用于div { width: 100px; height: 100px}，但div { width: 200px; height: 200px}无法在我的测试0.8px计算中需要至少用1.1048507095px替换用于显示对角线，甚至线条渲染质量也很差。我们希望很快就能解决这个Chrome漏洞。

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

Answer 2

你可以这样做：

<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版本。

Answer 3

您可以使用SVG绘制线条。

.diag {
    background: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' version='1.1' preserveAspectRatio='none' viewBox='0 0 100 100'><path d='M1 0 L0 1 L99 100 L100 99' fill='black' /><path d='M0 99 L99 0 L100 1 L1 100' fill='black' /></svg>");
    background-repeat:no-repeat;
    background-position:center center;
    background-size: 100% 100%, auto;
}

<div class="diag" style="width: 300px; height: 100px;"></div>

在这里玩游戏：http://jsfiddle.net/tyw7vkvm

Answer 4

这个3岁问题的所有其他答案都需要CSS3（或SVG）。但是，它也可以用蹩脚的旧CSS2来完成：

＆＃13;

insert

＆＃13;

.crossed {
    position: relative;
    width: 300px;
    height: 300px;
}

.crossed:before {
    content: '';
    position: absolute;
    left: 0;
    right: 0;
    top: 1px;
    bottom: 1px;
    border-width: 149px;
    border-style: solid;
    border-color: black white;
}

.crossed:after {
    content: '';
    position: absolute;
    left: 1px;
    right: 1px;
    top: 0;
    bottom: 0;
    border-width: 149px;
    border-style: solid;
    border-color: white transparent;
}

＆＃13;

按要求说明：

而不是实际绘制对角线，我发现我们可以改为在我们想要看到这些线的位置附近着色所谓的负空间三角形。我想出来实现这一目标的技巧利用了多色CSS边框沿对角线倾斜的事实：

＆＃13;

<div class='crossed'></div>

＆＃13;

.borders {
    width: 200px;
    height: 100px;
    background-color: black;
    border-width: 40px;
    border-style: solid;
    border-color: red blue green yellow;
}

＆＃13;

为了使事情符合我们想要的方式，我们选择尺寸为0且LINE_THICKNESS像素的内部矩形，以及另一个尺寸相反的内部矩形：

＆＃13;

<div class='borders'></div>

＆＃13;

.r1 { width: 10px;
      height: 0;
      border-width: 40px;
      border-style: solid;
      border-color: red blue;
      margin-bottom: 10px; }
.r2 { width: 0;
      height: 10px;
      border-width: 40px;
      border-style: solid;
      border-color: blue transparent; }

＆＃13;

最后，使用<div class='r1'></div><div class='r2'></div>和:before伪选择器并将相对/绝对位置作为一种巧妙的方式将上述两个矩形的边框插入到您的HTML元素中选择，产生对角十字架。请注意，使用精简的LINE_THICKNESS值（例如1px。

），结果可能看起来最佳

Answer 5

请检查以下内容。

<canvas id="myCanvas" width="200" height="100"></canvas>
<div id="mydiv"></div>

JS：

var c = document.getElementById("myCanvas");
var ctx = c.getContext("2d");
ctx.strokeStyle="red";
ctx.moveTo(0,100);
ctx.lineTo(200,0);
ctx.stroke();
ctx.moveTo(0,0);
ctx.lineTo(200,100);
ctx.stroke();

CSS：

html, body { 
  margin: 0;
  padding: 0;
}

#myCanvas {
  padding: 0;
  margin: 0;
  width: 200px;
  height: 100px;
}

#mydiv {
  position: absolute;
  left: 0px;
  right: 0;
  height: 102px;
  width: 202px;
  background: rgba(255,255,255,0);
  padding: 0;
  margin: 0;
}

jsfiddle

Answer 6

你可以使用CSS3转换属性：

div
{
transform:rotate(Xdeg);
-ms-transform:rotate(Xdeg); /* IE 9 */
-webkit-transform:rotate(Xdeg); /* Safari and Chrome */
}

Xdeg =你的价值

例如......

您可以创建更多div并使用z-index属性。所以，用线做一个div，然后旋转它。

Answer 7

这是我使用css clip-path属性以及 relative 和 absolute 定位来创建更精美的十字架的方法。

.cross {
  width:150px;
  height: 150px;
  border: 2px solid #555;
  border-radius: 5px;
  position: relative;
  background: #efefef;
}

.cross .diag1{
  position: absolute;
  width:100%; height:100%;
  clip-path: polygon(90% 0, 100% 0%, 10% 100%, 0% 100%);
  background: #311B92;
}

.cross .diag2{
  position: absolute;
  width:100%; height:100%;
  clip-path: polygon(0 0, 10% 0, 100% 100%, 90% 100%);
  background: #1B5E20;
}

<div class="cross">
  <div class="diag1"></div>
  <div class="diag2"></div>
</div>

如果要进行调整，请在此处输入link to the code on codepen。

Answer 8

如果您希望十字架是部分透明的，那么幼稚的方法是将linear-gradient的颜色设为半透明。但是，由于交点处的Alpha混合产生了颜色不同的钻石，所以效果不佳。解决方案是保留颜色不变，但向渐变容器添加透明度：

.cross {
  position: relative;
}
.cross::after {
  pointer-events: none;
  content: "";
  position: absolute;
  top: 0; bottom: 0; left: 0; right: 0;
}

.cross1::after {
  background:
    linear-gradient(to top left, transparent 45%, rgba(255,0,0,0.35) 46%, rgba(255,0,0,0.35) 54%, transparent 55%),
    linear-gradient(to top right, transparent 45%, rgba(255,0,0,0.35) 46%, rgba(255,0,0,0.35) 54%, transparent 55%);
}

.cross2::after {
  background:
    linear-gradient(to top left, transparent 45%, rgb(255,0,0) 46%, rgb(255,0,0) 54%, transparent 55%),
    linear-gradient(to top right, transparent 45%, rgb(255,0,0) 46%, rgb(255,0,0) 54%, transparent 55%);
  opacity: 0.35;
}

div { width: 180px; text-align: justify; display: inline-block; margin: 20px; }

<div class="cross cross1">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam et dui imperdiet, dapibus augue quis, molestie libero. Cras nisi leo, sollicitudin nec eros vel, finibus laoreet nulla. Ut sit amet leo dui. Praesent rutrum rhoncus mauris ac ornare. Donec in accumsan turpis, pharetra eleifend lorem. Ut vitae aliquet mi, id cursus purus.</div>

<div class="cross cross2">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam et dui imperdiet, dapibus augue quis, molestie libero. Cras nisi leo, sollicitudin nec eros vel, finibus laoreet nulla. Ut sit amet leo dui. Praesent rutrum rhoncus mauris ac ornare. Donec in accumsan turpis, pharetra eleifend lorem. Ut vitae aliquet mi, id cursus purus.</div>

Answer 9

intrepidis' answer在此页面上使用CSS中的背景SVG可以很好地缩放到任何大小或长宽比，尽管SVG使用<path> s填充得不能很好地缩放

我刚刚将SVG代码更新为使用<line>而不是<path>，并添加了non-scaling-stroke vector-effect以防止笔划随容器缩放：

<svg xmlns='http://www.w3.org/2000/svg' version='1.1' preserveAspectRatio='none' viewBox='0 0 100 100'>
  <line x1='0' y1='0' x2='100' y2='100' stroke='black' vector-effect='non-scaling-stroke'/>
  <line x1='0' y1='100' x2='100' y2='0' stroke='black' vector-effect='non-scaling-stroke'/>
</svg>

以下是从原始答案（将HTML调整为可调整大小）后放入CSS的信息：

.diag {
  background: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' version='1.1' preserveAspectRatio='none' viewBox='0 0 100 100'><line x1='0' y1='0' x2='100' y2='100' stroke='black' vector-effect='non-scaling-stroke'/><line x1='0' y1='100' x2='100' y2='0' stroke='black' vector-effect='non-scaling-stroke'/></svg>");
  background-repeat: no-repeat;
  background-position: center center;
  background-size: 100% 100%, auto;
}

<div class="diag" style="width: 200px; height: 150px; border: 1px solid; resize: both; overflow: auto"></div>

Answer 10

我需要在任何div内绘制任意对角线。我提出的其他答案的问题是，如果您自己不对这些角度做三角函数，那么他们中的任何一个都不允许绘制从A点到B点的任意线。使用javascript和CSS，您可以执行此操作。希望这对您有所帮助，只需指定两点即可，您就很勇往直前。

const objToStyleString = (obj) => {
  const reducer = (acc, curr) => acc += curr + ": " + obj[curr] + ";"; 
  return Object.keys(obj).reduce(reducer, "")
};

const lineStyle = (xy1, xy2, borderStyle) => {
  const p1 = {x: xy1[0], y: xy1[1]};
  const p2 = {x: xy2[0], y: xy2[1]};
  
  const a = p2.x - p1.x;
  const xOffset = p1.x;
  const b = p2.y - p1.y;
  const yOffset = p1.y;
  
  const c = Math.sqrt(a*a + b*b);
  
  const ang = Math.acos(a/c);
  
  const tX1 = `translateX(${-c/2 + xOffset}px) `;
  const tY1 = `translateY(${yOffset}px) `;
  const rot = `rotate(${ang}rad) `;
  const tX2 = `translateX(${c/2}px) `;
  const tY2 = `translateY(${0}px) `;
  
  return {
    "width": Math.floor(c) + "px",
    "height": "0px",
    "border-top": borderStyle,
    "-webkit-transform": tX1+tY1+rot+tX2+tY2,
    "position": "relative",
    "top": "0px",
    "left": "0px",
    "box-sizing": "border-box",
  };
};

function drawLine(parent, p1, p2, borderStyle) {
  const style = lineStyle(p1, p2, borderStyle);
  const line = document.createElement("div");
  line.style = objToStyleString(style);
  parent.appendChild(line);
}

drawLine(container, [100,5], [25,195], "1px dashed purple");
drawLine(container, [100,100], [190,190], "1px solid blue");
drawLine(container, [25,150], [175,150], "2px solid red");
drawLine(container, [25,10], [175,20], "5px dotted green");

#container {
  background-color: #BCBCBC;
  width: 200px;
  height: 200px;
  padding: 0; 
  margin: 0;
}

<div id="container">
</div>

Answer 11

.crossed {
    width: 200px;
    height: 200px;
    border:solid 1px;
    background-color: rgb(210, 137, 226);
    background-image: repeating-linear-gradient(
      45deg,
      transparent,
      transparent 15px,
      #ccc 10px,
      #ccc 20px
        ),
      repeating-linear-gradient(
        135deg,
        transparent,
        transparent 15px,
        #ccc 10px,
        #ccc 20px
      );
}

<div class='crossed'>Hello world</div>

Answer 12

针对任何屏幕的svg动态解决方案如下：

<svg xmlns="http://www.w3.org/2000/svg" width="100%" height="100%" stroke-width="1" stroke="#000">
  <line x1="0" y1="0" x2="100%" y2="100%"/>
  <line x1="100%" y1="0" x2="0" y2="100%"/>
</svg>

如果要使其保留在后台，请使用position: absolute，顶部和左侧均为0。

Answer 13

＆＃13;

.borders {
    width: 200px;
    height: 100px;
    background-color: black;
    border-width: 40px;
    border-style: solid;
    border-color: red blue green yellow;
}

＆＃13;

<div class='borders'></div>

＆＃13;

用CSS在div背景中绘制对角线

问：如何将对角线添加到div背景中，如图片

13 个答案:

按要求说明：