我想创建一个由对角线分成两部分的div。例如,左侧应为黄色,右侧应为蓝色。我该怎么做?
谢谢。
(请运行下面的代码以查看我所讨论的示例)。
<html>
<body>
<p>
******************************************<br>
**********************....................<br>
*********************.....................<br>
********************......................<br>
*******************.......................<br>
******************........................<br>
*****************.........................<br>
******************************************<br>
</p>
</body>
</html>
使用CSS3渐变可以轻松完成此操作
看下面的代码:
p .diagonal{
background: #1e5799;
background: -moz-linear-gradient(-45deg, #1e5799 50%, #fff600 50%);
background: -webkit-gradient(linear, left top, right bottom, color-stop(50%,#1e5799), color-stop(50%,#fff600));
background: -webkit-linear-gradient(-45deg, #1e5799 50%,#fff600 50%);
background: -o-linear-gradient(-45deg, #1e5799 50%,#fff600 50%);
background: -ms-linear-gradient(-45deg, #1e5799 50%,#fff600 50%);
background: linear-gradient(135deg, #1e5799 50%,#fff600 50%);
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#1e5799', endColorstr='#fff600',GradientType=1 );
}
如果是太难理解你,使用一些在线服务,像这样来产生所需的梯度。
只需将两种颜色的位置设置为50%:)
本文收集自互联网,转载请注明来源。
如有侵权,请联系[email protected] 删除。
我来说两句