2

enter image description here

The above image is a screenshot of the top of a side navigation on my site. I would like for the nav container to have a "clipped" top right corner, which I am currently achieving with 

.sideNav {
  background: rgba(24, 69, 59, .8);
  color: #FFF;
  padding: 10px;
  position: relative;
}
.sideNav:after {
  content: "";
  position: absolute;
  top: 0;
  right: 0;
  border-width: 40px 0px 0px 40px;
  border-style: solid;
  border-color: #fff #fff transparent transparent;
  background-clip: content-box;
}
<nav id="navMultilevel" class="mura-nav-multi-level sideNav zDepth1" role="navigation" aria-label="secondary">
  <h2>Research</h2>
  <ul class="nav nav-list">
    <li class="first"><a href="/research/office-of-research-support/">Office of Research Support</a>
    </li>
    <li><a href="/research/research-centers-facilities/">Research Centers &amp; Facilities</a>
    </li>
    <li><a href="/research/industry-relations-tech-transfer/">Industry Relations &amp; Tech Transfer</a>
    </li>
    <li class="last"><a href="/research/adapp-advance/">ADAPP-Advance</a>
    </li>
  </ul>
</nav>

on the nav container. I would like to have a box-shadow applied around the container, which you can see on the right side of the image. The problem is that the shadow follows the "box" of the nav container, and not the clipped edge. Is there any way to accomplish this with just CSS?

G-Cyrillus
  • 101,410
  • 14
  • 105
  • 129
JesseEarley
  • 1,036
  • 9
  • 20

4 Answers4

3

You can give a try to multiple box-shadow and draw the diaagonal and background via linear gradient. This is average, result will varie from colors used on shadow and body background.

.sideNav {
  background:linear-gradient(225deg,transparent 25px,gray 30px, rgba(24, 69, 59, .8) 30px);
  color: #FFF;
  padding: 10px;
  position: relative;
  margin:1em;
  box-shadow: 
    -3px 3px 3px  #000,
    21px 21px 3px  -20px black,
    -21px -22px 3px -20px black
}
<nav id="navMultilevel" class="mura-nav-multi-level sideNav zDepth1" role="navigation" aria-label="secondary">
  <h2>Research</h2>
  <ul class="nav nav-list">
    <li class="first"><a href="/research/office-of-research-support/">Office of Research Support</a>
    </li>
    <li><a href="/research/research-centers-facilities/">Research Centers &amp; Facilities</a>
    </li>
    <li><a href="/research/industry-relations-tech-transfer/">Industry Relations &amp; Tech Transfer</a>
    </li>
    <li class="last"><a href="/research/adapp-advance/">ADAPP-Advance</a>
    </li>
  </ul>
</nav>
G-Cyrillus
  • 101,410
  • 14
  • 105
  • 129
3

I have changed the way to generate the cutted corner to a background gradient.

Now, it's possible to use a drop shadow , that will keep the transparency of the corner

.sideNav {
  background-image: linear-gradient(225deg, transparent 70px, rgba(24, 69, 59, .8) 70px);
  color: #FFF;
  padding: 10px;
  position: relative;
  filter: drop-shadow(0px 0px 10px red);
}
<nav id="navMultilevel" class="mura-nav-multi-level sideNav zDepth1" role="navigation" aria-label="secondary">
  <h2>Research</h2>
  <ul class="nav nav-list">
    <li class="first"><a href="/research/office-of-research-support/">Office of Research Support</a>
    </li>
    <li><a href="/research/research-centers-facilities/">Research Centers &amp; Facilities</a>
    </li>
    <li><a href="/research/industry-relations-tech-transfer/">Industry Relations &amp; Tech Transfer</a>
    </li>
    <li class="last"><a href="/research/adapp-advance/">ADAPP-Advance</a>
    </li>
  </ul>
</nav>
vals
  • 61,425
  • 11
  • 89
  • 138
1

You would need to use an svg element and filters for this. For an example, scroll to the "15.2. An example" section in that page.

Please note that, for the most part, your question could be considered a duplicate of this question, because the most accurate way of achieving the desired effect is by using a <svg> dropping a shadow.

One might be tempted to think using clip-path CSS property might work, but it can only be used for inset box-shadows, not outset, as the box-shadow will be clipped by the mask, too.

I'm not an expert in <svg> filters, but here's my best try at it:

.section-title {
  width: 390px;
  height: 97px;
  color: white;
  font-size: 30px;
  font-family: sans-serif;
  padding: 0 35px;
  box-sizing: border-box;
  line-height: 97px;
  background: url('data:image/svg+xml,<svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" width="390px" height="97px" viewBox="0 0 390 97" enable-background="new 0 0 390 97" xml:space="preserve"><defs><filter id="f2" x="0" y="0" width="200%" height="200%"><feOffset result="offOut" in="SourceGraphic" dx="0" dy="1" stdDeviation="10" /><feGaussianBlur result="blurOut" in="offOut" stdDeviation="3" /><feBlend in="SourceGraphic" in2="blurOut" mode="normal" /></filter></defs><g><path fill-rule="evenodd" clip-rule="evenodd" fill="#41625A" d="M20,20h310l40,40v17H20V-20z" filter="url(#f2)"/></g></svg>') no-repeat 50% 50% /contain;
}
<div class="section-title">Research</div>

For a closer look at the <svg> itself, here it is:

<svg version="1.1"
     xmlns="http://www.w3.org/2000/svg"
     xmlns:xlink="http://www.w3.org/1999/xlink"
     x="0px" y="0px" width="390px" height="97px"
     viewBox="0 0 390 97"
     enable-background="new 0 0 390 97"
     xml:space="preserve"
>
 <defs>
  <filter id="f2" x="0" y="0" width="200%" height="200%">
   <feOffset result="offOut" in="SourceGraphic" dx="0" dy="1" stdDeviation="10" />
   <feGaussianBlur result="blurOut" in="offOut" stdDeviation="3" />
   <feBlend in="SourceGraphic" in2="blurOut" mode="normal" />
  </filter>
 </defs>
 <g>
  <path fill-rule="evenodd" clip-rule="evenodd"
        fill="#41625A"
        d="M20,20h310l40,40v17H20V-20z"
        filter="url(#f2)"/>
 </g>
</svg>

The <svg> i made has fix width and height. I don't know if it's possible to create one with dynamic width, while keeping the cut angle of the corner at 45 deg, as it would be with clip-paths, by using calc(). It might be possible, but my knowledge of <svg> attributes and capabilities is limited. If I find out of such a possibility, I'll make sure to update my answer.

Community
  • 1
  • 1
tao
  • 82,996
  • 16
  • 114
  • 150
0

I ended up going with this...

.sideNav {
        background: rgba(24,69,59,.8);
        color: #FFF;
        padding: 10px;
        position: relative;
 } 

.sideNav:before {
            content: "";
            position: absolute;
            top: -5px;
            right: -5px;
            border-width: 50px 0px 0px 50px;
            border-style: solid;
            border-color: #fff #fff transparent transparent;
            background-clip: content-box;
        }

.sideNav:after {
            content: "";
            position: absolute;
            top: 0;
            right: 0;
            border-width: 40px 0px 0px 40px;
            border-style: solid;
            border-color: #fff #fff transparent transparent;
            background-clip: content-box;
        }

.zDepth1 {
    box-shadow: 0 2px 2px 0 rgba(0,0,0,0.14),0 1px 5px 0 rgba(0,0,0,0.12),0 3px 1px -2px rgba(0,0,0,0.2);
}
                    <nav id="navMultilevel" class="mura-nav-multi-level sideNav zDepth1" role="navigation" aria-label="secondary">
                        <h2>Research</h2>
                        <ul class="nav nav-list">
                            <li class="first"><a href="/research/office-of-research-support/">Office of Research Support</a></li>
                            <li><a href="/research/research-centers-facilities/">Research Centers &amp; Facilities</a></li>
                            <li><a href="/research/industry-relations-tech-transfer/">Industry Relations &amp; Tech Transfer</a></li>
                            <li class="last"><a href="/research/adapp-advance/">ADAPP-Advance</a></li>
                        </ul>
                    </nav>

The :before psuedo-element allows me to simply cover up the border that is being shown.

JesseEarley
  • 1,036
  • 9
  • 20