logo标签列表

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

cssbackgroundlinecss-shapesdiagonal
88

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

.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 class="preview-content">PREVIEW</div>

问题：如何在 div 背景中添加类似图片中的对角线？

注意：尽可能只使用 CSS 实现

preview

提前感谢您。

你只是想要添加两行代码吗？ - cdMinix
是的，只有2个，就像图片中一样。 - Ing. Michal Hudak
如果您需要为Margin或Padding输入设计Box模型输入，就像浏览器的Margin-Padding Box模型一样，请访问https://jsfiddle.net/bx2paunL/。 - Harsh Patel
13个回答
206
自动按元素缩放的解决方案是使用 CSS3 线性渐变与 calc () 相结合，如下所示。（这个答案最初描述了 Chrome 在 v30+ 版本时存在一些问题，但似乎在后来得到了解决，在 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>

15
这是一个 jsfiddle，如果您想尝试这个解决方案可以使用它：http://jsfiddle.net/zaxy6pmn/ - danvk
1
不错的解决方案。已更新为背景重复：http://jsfiddle.net/6q4m4ww8/我现在的问题是如何在x之间添加距离。 - Daniel Ursu
1
如果我想把背景颜色改成灰色而不是白色怎么办？ - Bargain23
完美的可重用解决方案 - jis0324
当我的包含div只有2像素高时（即线条几乎水平），Firefox和Chrome似乎都会淡化线条的开头和结尾。我猜这是反锯齿效果？有什么方法可以将其关闭吗？ - Patrick Szalapski
显示剩余5条评论
38
你可以像这样做：

你可以这样做：

.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;
}
<div class="background">
  <div class="line1"></div>
  <div class="line2"></div>
</div>

这是一个jsfiddle。

针对您的需求进行改进的answer版本。

3
使用-webkit-transform只能在基于WebKit的浏览器中生效。建议首先指定标准的W3C transform规则，然后再指定其他特定于浏览器的规则，例如-webkit-transform、-moz-transform、-ms-transform和-o-transform。 - T-moty
38

您可以使用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

2
不错！一直在寻找模拟“划掉”价格的解决方案，这个经过一些小修改后非常好用 http://jsfiddle.net/tyw7vkvm/636/ - Mavelo
@intrepidis 如何增加线条的粗细？ - Tony Mathew
它类似于<path stroke-width='2' d='...'>。 - intrepidis
1
@TonyMathew 这里是4像素粗的代码: <path d='M 4 0 L 4 0 L 0 0 L 0 4 L 96 100 L 100 100 L 100 96' fill='black' /><path d='M 96 0 L 96 0 L 100 0 L 100 4 L 4 100 L 0 100 L 0 96' fill='black' /> 只需将4和96更改为所需的宽度即可。(例如2和98、5和95) - Sam Eaton
20

所有对这个三年老问题的回答都需要使用CSS3（或SVG），但实际上只需要使用老旧的CSS2就可以做到：

.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;
}
<div class='crossed'></div>

解释如下：

我们可以通过给所谓的“负空间”三角形着色来代替真正画对角线。我想出的技巧是利用多色CSS边框在对角线处有斜面这一事实来实现：

.borders {
    width: 200px;
    height: 100px;
    background-color: black;
    border-width: 40px;
    border-style: solid;
    border-color: red blue green yellow;
}
<div class='borders'></div>

为了使事物符合我们的要求，我们选择一个内部矩形，其尺寸为0和LINE_THICKNESS像素，并选择另一个尺寸相反的矩形：

为了让事情符合我们的要求，我们选择一个内部矩形，其尺寸为0和LINE_THICKNESS像素，以及另一个尺寸相反的矩形：

.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; }
<div class='r1'></div><div class='r2'></div>

最后，使用:before和:after伪选择器，以及相对/绝对定位的方式将上述两个矩形的边框整齐地插入到您选择的HTML元素中，以产生一个斜交叉线。请注意，使用较小的LINE_THICKNESS值（例如1px）可能会得到最佳效果。

1
是的，不错的技巧，但忽略了原问题的一个假设：要跨越 div 的 width: 100% ;) 不过，公平地说，从被接受的答案来看，似乎这不是硬性要求。 - RobertT
16

intrepidis' answer 在这个页面使用CSS中的背景SVG具有良好的缩放性，适用于任何尺寸或长宽比。但是，SVG使用的<path>的填充效果并不适合缩放。

我刚刚更新了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>

以下是从原答案中提取出来的 CSS 代码（附带可调整大小的 HTML）：

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

1
这对于绘制线条非常棒，与其他形状/结构形成对比。谢谢。 - tyrex
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

1
请注意，宽度为100％，即width: 100％;，因此框将浮动，因此我无法将坐标永久写入js。 - Ing. Michal Hudak
5

enter image description here

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

4

下面是针对任何屏幕的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，并将top和left设置为0。

3
您可以使用CSS3的变换属性：
div
{
transform:rotate(Xdeg);
-ms-transform:rotate(Xdeg); /* IE 9 */
-webkit-transform:rotate(Xdeg); /* Safari and Chrome */
}

Xdeg = 您的值

例如...

您可以创建更多的div并使用z-index属性。 因此，创建一条带有线条的div并旋转它。

2

我使用css clip-path 属性以及相对定位和绝对定位来创建一个更加华丽的十字架，以下是具体步骤：

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

如果您想要进行调整，这里是一个关于该代码的链接。

网页内容由stack overflow 提供, 点击上面的
可以查看英文原文，
原文链接