html - 如何构建一个宽度为 50% 的梯形菜单背景

Question

如何为网站菜单构建梯形背景？高度应始终为屏幕的 100%。

我有一个矩形代码，但我不知道如何添加一个始终具有相同角度的三角形？

这是我的一些代码：

https://codepen.io/mattkr/pen/jOPxLQJ

形状应如下所示：

https://prnt.sc/rh2c62

enter code here

标签： htmlcss

Answer 1

你可以试试这个：linear-gradient(71deg, #FFFFFF 50%, #FF3C23 50%)

---

div {
  height: 75px;
  width: 75px;
  background: linear-gradient(71deg, #FFFFFF 50%, #FF3C23 50%)
}

<div></div>