用CSS在div背景中绘制对角线
Ing*_*dak 44 css background line diagonal css-shapes
我有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
先感谢您
Rob*_*rtT 98
几乎完美的解决方案,自动缩放到元素的尺寸将使用与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%);
}- 如果你想使用这个解决方案,这里有一个jsfiddle:http://jsfiddle.net/zaxy6pmn/ (12认同)
Axe*_*PAL 25
你可以这样做:
<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.
为您的目的改进版本的答案.
- 块的宽度不是永久的,请注意`width:100%;` (2认同)
- 使用`-webkit-transform`只能在基于WebKit的浏览器上运行.我建议将标准W3C`transform`规则指定为第一步,然后指定其他特定于浏览器的规则,例如`-webkit-transform`,`-moz-transform`,`-ms-transform`,`-o-transform `. (2认同)
int*_*dis 20
您可以使用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认同)
Wil*_*ill 14
这个3岁问题的所有其他答案都需要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像素的内部矩形,以及另一个具有相反尺寸的矩形:
.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),结果可能看起来最佳.
请检查以下内容.
<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;
}
小智 5
intrepidis在此页面上的回答使用 CSS 中的背景 SVG 具有可以很好地缩放到任何大小或纵横比的优势，尽管 SVG 使用<path>s 的填充不能很好地缩放。
我刚刚更新了要使用的 SVG 代码<line>，<path>并添加了non-scaling-stroke 矢量效果以防止笔触随容器缩放：
<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 可调整大小）：
<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>
.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;
}
.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>