html - 创建 90 度三 Angular 形元素

Question

我正在尝试找到一种方法来创建如下图所示的 html/css 元素。我知道如何使用一些 css 技巧制作 90 度三 Angular 形，但是我找不到向其添加线性渐变以使其看起来像下图的方法。提前致谢!

Answer 1

可以在菜单中放置一个旋转的元素，使用overflow: hidden;隐藏元素的左右两侧。将菜单项放在它上面的另一个元素中，这样它们也不会旋转:

.menu { position: relative; width: 200px; height: 300px; overflow: hidden; }
.menu .top { height: 50px; background: #c00; padding: 10px; }
.menu .bg { position: absolute; left:-25px; top: 50px; width: 250px; height: 200px; background: linear-gradient(to right, #f33 0%,#f00 100%); transform: rotate(-5deg); }
.menu .items { position: absolute; left: 0; top: 70px; }
.menu .items a { display: block; padding: 5px 20px; }

<div class="menu">
  <div class="top">Menu</div>
  <div class="bg"></div>
  <div class="items">
    <a href="#">Menu item</a>
    <a href="#">Menu item</a>
    <a href="#">Menu item</a>
    <a href="#">Menu item</a>
  </div>
</div>