用css画3个三角形

.centerTriangle {
  clip-path: polygon(0 0, 50% 100%, 100% 0);
  background-color: red;
}

.leftTriangle {
  clip-path: polygon(0 0, 0% 100%, 100% 100%);
  background-color: blue;
}

.rightTriangle {
  clip-path: polygon(100% 0, 0% 100%, 100% 100%);
  background-color: green;
}

<div class="leftTriangle"></div>
<div class="centerTriangle"></div>
<div class="rightTriangle"></div>

html {
  min-height:100%;
  
  background:
    linear-gradient(to top right,blue  50%,red 0) left /50.1% 100% no-repeat,
    linear-gradient(to top left ,green 50%,red 0) right/50.1% 100% no-repeat;
}

Css相关问答推荐

在React Native中使用绝对位置对图像进行居中

如何提高数学输出的质量？

MUI Reaction移除焦点上的轮廓边框

在主零部件悬停上对子零部件设置Angular 样式

努力将 CSS 样式应用于 Elm 应用程序

Flex & space-around 与内容相交

为什么 em 不将定义的字体大小加倍？

在表格中隐藏绝对伪元素

更改组件中 css 的值

基于变量动态生成 CSS 类 - SCSS

边界半径不起作用

弹性盒项目之间的间距

使用 JavaScript 将 CSS 添加到 ？

如何在渲染之前获取react 组件的大小(高度/宽度)？

css3 nth 类型限制为类

在 Vuejs 中拥有全局 CSS 的最佳方式

Angular 动画的目的是什么？

数据协议 URL 大小限制

如何在 React 应用程序中使用 CSS 模块应用全局样式？

从 textarea 中删除所有样式(边框、发光)