0

I'm trying to find out a way to create the element as show in the image below in html/css. I know how to make 90 degree triangles with some css tricks, however I can't find a way to add a linear gradient to it in order to make it look like the image below. Thanks in advance!

enter image description here

Martijn Zwanenburg
  • 96
  • 2
  • 10
  • Have a look at the Method 2 in this thread for details - http://stackoverflow.com/questions/30441122/shape-with-a-slanted-side-responsive. It should help you create the gradient though the direction is a bit different from that sample. – Harry Sep 07 '15 at 16:18

1 Answers1

3

You can place a rotated element in the menu, and use overflow: hidden; to hide the left and right sides of the element. Place the menu items in another element on top of it, so that they are not rotated also:

.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>
Guffa
  • 687,336
  • 108
  • 737
  • 1,005
  • Not trying to put down the answer in any way but is there a specific reason for the choice of `div` over `ul` and `li` or is it just like that? Just trying to see if there is something that I can learn :) – Harry Sep 07 '15 at 16:35
  • 1
    @Harry: No, not any reason, really. I just chose a simple way to get a few items to line up in a list like fashion, that involved a minimum of HTML and CSS, as formatting the menu items was not the issue of the question. :) – Guffa Sep 07 '15 at 16:43