Question

我想创建一个div，它由对角线分成两部分。左侧应为黄色（例如），右侧应为蓝色。我怎么能这样做？

感谢。

（请运行下面的代码以查看我正在谈论的示例）。

<html>
<body>
<p>
******************************************<br>
**********************....................<br>
*********************.....................<br>
********************......................<br>
*******************.......................<br>
******************........................<br>
*****************.........................<br>
******************************************<br>
</p>
</body>
</html>

Answer 1

使用 CSS3 Gradients

可以轻松完成此操作

看看以下代码：

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 );
}

如果您难以理解，请使用this等在线服务生成所需的渐变。

只需将两种颜色的位置设置为50％：）

CSS中的对角线

1 个答案: