How can I create the angle shown on the header with CSS?

Question

I need to create a header that looks like the firs image, however, it can't be an image. Preferably just css, but open to jQuery if there is a way to do this with jQuery.

I have tried many different things, but cannot create the 45 degree angle on the header(just before Home). This is the closest I have gotten. The colors are wrong in this image but that is intentional so that I could better illustrate the issue.

This is part of my latest attempt make this work and I think I am close with it, but it still isn't right.

   #header{
    float:left;
    margin-top:20px;
    overflow: hidden;
    padding-bottom: 10px;
    background-color:#F1F1F1;
    -moz-box-shadow:    3px 3px 5px 0px #ccc;
    -webkit-box-shadow: 3px 3px 5px 0px #ccc;
    box-shadow:         3px 3px 5px 0px #ccc;
    width: 100%;
    height:130px;
    z-index: 1;
}
#secondHeader{
    float:right;
    background-color:#ffffff;
    width:50%;
    height: 80px;
    position: relative;
    margin-top: -50px;
    margin-right:15px;
    /* border-radius: 15px 15px 0px 20px; */
    /* background-color:#ff0000; */
    -moz-box-shadow:    3px 3px 5px 6px #ccc;
    -webkit-box-shadow: 3px 3px 5px 6px #ccc;
    box-shadow:         3px 3px 5px 6px #ccc;
    z-index: 10;
}
#secondHeader::before{
    height: 80px;
    width: 70px;
    border-radius: 10px 10px 10px 10px;
    background-color: #f1f1f1;
    content: "";
    position: absolute;
    left: 32px;
    top: 0px;
    -webkit-transform: skewX(-45deg);
    transform: skewX(-45deg);
    z-index: -1;
}

What am I doing wrong? I have worked on this for two days and cannot figure it out.

possible duplicate of: https://stackoverflow.com/q/30441122/8620333 — Temani Afif, Jun 08 '19 at 21:30
@Temani - that is more complicated that is needed for this. Don't think that is a dup. — Randy Casburn, Jun 08 '19 at 21:32
@RandyCasburn it's a *possible* dupe and for me it's the canonical one because all the ways to create that kind of shape are there and well explained (as a side note I didn't close as duplicate) — Temani Afif, Jun 08 '19 at 21:33

Randy Casburn · Accepted Answer · 2019-06-08T21:51:34.680

2

this is pretty close to what you need. Simply using borders to do this:

#menubar {
width: 40vw;
min-height: 100px;
background-color: rgba(0,0,0,0.1);
}
#menubar ul {
margin-left: 55px;
padding-top: 40px;
}

#angle {
  position: absolute;
  border-top: 102px solid rgba(0,0,0,0.1);
  border-right: 52px solid transparent;
  border-left: 0px solid transparent;
  height: 0;
  width: 2px;
}

#angle2 {
position: absolute;
  border-top: 100px solid white;
  border-right: 50px solid transparent;
  border-left: 0px solid transparent;
  height: 0;
  width: 1px;
}

<div id="menubar"><div id="angle"></div><div id="angle2"></div><ul>Menu here</ul></div>

edited Jun 08 '19 at 21:51

answered Jun 08 '19 at 21:31

Randy Casburn

13,840
1
16
31

I don't think he's talking about this one as he said: *but cannot create the 45 degree angle on the header(just before Home).* – Temani Afif Jun 08 '19 at 21:35
Thank you @RandyCasburn. I can't believe it was that easy, yet I could not figure it out. Accepting your answer now. – trouble706 Jun 08 '19 at 21:51
here is the menu bar. A bit more complex, but still straight forward. – Randy Casburn Jun 08 '19 at 21:51

How can I create the angle shown on the header with CSS?

1 Answers1