本文介绍了我怎样才能最好地创建一个响应式的两色调对角线背景?的处理方法,对大家解决问题具有一定的参考价值,需要的朋友们下面随着小编来一起学习吧!
问题描述
尝试创建一个像这样的响应式,两个色调的对角线背景.我已经尝试过线性渐变,但是对角线太锯齿了.我也尝试过转换倾斜,但是还有其他问题,包括现代浏览器的浏览器兼容性.因此,我正在寻找替代方案.也许可以使用SVG或类似的东西吗?我对SVG没有太多经验.
解决方案
您可以使用类似@Daniel McClintock的响应式对角divs解决方案, http://codepen.io/danielsmcclintock/pen/ljeis 或@Gabriel Viva's, http://codepen.io/gabssnake/pen/yhpvI .
而不是在div中放置文本,而是在其顶部position:absolute
另一个div并将文本在其中垂直和水平居中
Trying to create a responsive, two tone diagonal background like this one. I've already tried linear-gradients, but the diagonal line comes out too jagged. I've also tried transform skew, but that had other issues, including browser compatibility for modern browsers. So I'm looking for an alternative. Is it perhaps possible to do with SVG or something similar? I don't have much experience with SVG.
解决方案
You can use something like @Daniel McClintock's responsive diagonal divs solution, http://codepen.io/danielsmcclintock/pen/ljeis, or @Gabriel Viva's, http://codepen.io/gabssnake/pen/yhpvI. Instead of putting text inside the divs, position:absolute
another div on top of it, and center the text vertically and horizontally within that
这篇关于我怎样才能最好地创建一个响应式的两色调对角线背景?的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持!