我想在div的背景上绘制2条平行的对角线.
请参阅我的表here:
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;
}
我希望实现这样的目标:
最佳答案
您可以使用旋转的伪元素实现2条对角线. 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);
}
这是如何工作的:
> 2行之间的宽度由伪元素的高度控制
>线条的粗细由边框宽度控制
>线的倾斜由旋转角度控制
>溢出的部分隐藏着溢出:隐藏; div上的财产
请注意,您需要将供应商前缀添加到transform和transform origin属性以获得浏览器支持,并且您可能不需要background-size属性上的供应商前缀:
原文地址:https://www.jb51.cc/html/426540.html
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。