HTML– 背景上的平行对角线

概述我想在div的背景上绘制2条平行的对角线.请参阅我的表here：body { background-image: url('http://i.imgur.com/TnPgXl4.jpg'); -webkit-background-size: cover; -moz-background-size: cover; -o-background-s

我想在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属性上的供应商前缀：

> canIuse for background-size
> canIuse for 2D transforms 总结

以上是内存溢出为你收集整理的HTML – 背景上的平行对角线全部内容，希望文章能够帮你解决HTML – 背景上的平行对角线所遇到的程序开发问题。

如果觉得内存溢出网站内容还不错，欢迎将内存溢出网站推荐给程序员好友。

欢迎分享，转载请注明来源：内存溢出

原文地址: http://outofmemory.cn/web/1124794.html