如何使用CSS创建对角线背景效果 [英] How to create a diagonal background effect, using CSS

问题描述

是否可以使用CSS创建如下图所示的效果？

/ b>

基本上我想创建一个背景分割为对角的< div> s你可以使用线性渐变 $ c>在背景上。请参阅以下示例：

body {height：100vh;宽度：100vw;背景：线性渐变（160deg，红色，红色60％，白色60％，白色）;}

$ b

Is it possible to create the effect shown in the following image, using CSS?

Basically I want to create <div>s that have a background split diagonally with a block color on side and white on the other?

解决方案

You can use linear-gradient on background. See the following example:

body {
  height:100vh;
  width:100vw;
  background:linear-gradient(160deg, red, red 60%, white 60%, white);
}

这篇关于如何使用CSS创建对角线背景效果的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！