创建90度三角形元素

Question

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

Answer 1

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

＆＃13;

＆＃13;

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

＆＃13;

<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>

＆＃13;

＆＃13;

＆＃13;