在背景上平行的对角线
Web R
我想在div的背景上绘制2条平行的对角线。
请在这里查看我的表格：
body {
background-image: url("http://i.imgur.com/TnPgXl4.jpg");
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
background-repeat: no-repeat;
padding: 40px;
}
#table {
width: 800px;
height: 300px;
background-color: transparent;
border: solid 1px white;
}<div id="table"></div>我想实现以下目标：
网络提基
您可以使用旋转的伪元素获得2条对角线。这两条线是绝对定位的伪元素的顶部和底部边界：
body {
background-image: url("http://i.imgur.com/TnPgXl4.jpg");
background-size: cover;
background-repeat: no-repeat;
padding: 40px;
}
#table {
position: relative;
width: 800px; height: 300px;
background-color: transparent;
border: solid 1px white;
overflow: hidden;
}
#table:before {
content: '';
position: absolute;
right: 30%; bottom: 100%;
height: 20px; width: 100%;
border-top: 1px solid #fff;
border-bottom: 1px solid #fff;
transform-origin: 100% 100%;
transform: rotate(-70deg);
}<div id="table"></div>这是这样的：
- 两行之间的宽度由伪元素的高度控制
- 线的粗细由边框宽度控制
- 线条的倾斜度由旋转角度控制
- 线的溢出部分被
overflow:hidden;div属性隐藏了
请注意，您需要在transform和transform origin属性中添加供应商前缀以支持浏览器，并且可能不需要在background-size属性上使用供应商前缀：
本文收集自互联网，转载请注明来源。
如有侵权，请联系[email protected] 删除。
编辑于
相关文章
Related 相关文章
- 1
创建对角线背景框
- 2
如何在C ++中找到矩阵2D中其他对角线的平行对角线反向
- 3
视线对角线
- 4
映射对角线
- 5
使用CSS在div背景中绘制对角线
- 6
如何使用 CSS 创建对角线背景效果
- 7
CSS - 带有叠加/背景模糊对角线的图像
- 8
将与R中的矩阵对角线平行的矩阵的某些项归零
- 9
pcolor上的对角线（刻面边缘不匹配！）
- 10
使元素可沿对角线/在路径上拖动
- 11
在2D数组上添加对角线
- 12
主对角线变成反对角线
- 13
更改矩阵中心对角线旁边的对角线
- 14
熊猫DataFrame对角线
- 15
CSS中的对角线
- 16
Holoviews的对角线（Python）
- 17
c的对角线差
- 18
对角线div与图像
- 19
div 顶部的对角线
- 20
表单元格两个颜色背景对角线
- 21
两个图像背景内联由对角线边框分隔
- 22
Tensorflow：使用对角线/超对角线创建输入的对角矩阵
- 23
修改特征矩阵对角线
- 24
确定围绕对角线的边界矩形
- 25
填写numpy数组的对角线失败
- 26
矩阵的对角线绑定
- 27
通过<div>或<span>的对角线
- 28
创建矩阵的非对角线元素
- 29
用对角线绘制UIView？
我来说两句