CSS（3）& HTML剪切边 [英] CSS (3) & HTML Cut edge

问题描述

这已经被问过了，但我需要不同的方式。请看下面的图片，看看我试着实现的导航栏：

问题：

• 阴影






• ul>
  
  

  当然，静态图片可以做到这一点，但我想使用别的东西。
  您有任何想法，如何做（尽可能多的浏览器支持）？

  
  
  

  EDIT：
  < nav> 是绝对定位的

  
  
  

  这是我到目前为止

  
  
  
  
  
  

  但是不能应用边框，固定大小也有问题。

    nav {
   float ： 剩下; 
   position：absolute; 
   background-color：#ffffff; 
   top：0; 
   left：0; 
   display：inline; 
   padding：12px; 
   padding-right：0; 
   width：auto; 
  } 
   
   .behind_nav {
   height：60px; 
   width：523px; 
   position：absolute; 
   top：0; 
   left：0; 
   border-right：20px solid transparent; 
   border-top：48px solid white; 
  } 
    

  .behind_nav 后面< nav> （惊喜，惊喜）。实际上，除了上面提到的阴影和边界问题，它工作得很好。它也绑定到一个固定值，这是有问题的。 < nav> 适合内容的宽度（可能因CMS数据/浏览器而异）

  解决方案

  粗糙演示： http://jsfiddle.net/W82UV/3/

  
  
  

  >

  
  
  

  我 这覆盖了您的困难的关键，即边缘歪斜，阴影和边框。

   < div id =top> 
  顶栏
  < / div> 
  < div id =container> 
  < div id =background> 
  < / div> 
  < nav> 
   Test 
  < / nav> 
  < / div> 
   
   #top {
   background-color：＃f0f0f0; 
   border-bottom：1px solid＃555; 
   Box-shadow：8px 8px 8px #aaa; 
  } 
   
   #container {
   position：relative; 
   top：-1px; 
   overflow：hidden; 
   height：96px; 
  } 
   
   #background {
   background-color：＃f0f0f0; 
   
   position：absolute; 
   top：-1px; 
   left：-32px; 
   border：1px solid＃555; 
   
   width：400px; 
   height：64px; 
   box-shadow：8px 8px 8px #aaa; 
   
   -webkit-transform：skew（-20deg）; 
   -moz-transform：skew（-20deg）; 
   -o-transform：skew（-20deg）; 
   -ms-transform：skew（-20deg）; 
   transform：skew（-20deg）; 
  } 
    

  在IE 8（不倾斜），9,10，FF ，和Chrome。注意，我可能会重新安排一些标记，以便为最终解决方案（更好的类名和/或ID）更清洁，并按比例定位一切。

  
  

  This has already been asked, but I need it in a different way. Please have a look at the image below to see the nav bar I try to realize:

  Problems:

  • Shadow around the edges
  • Text / Images inside the bar
  • 1px solid border around the figure would be great

  Of course a static image could do this, but I would like to use something else. Do you have any ideas, how to do that (with as much browser support as possible)?

  EDIT: <nav> is absolute positioned

  Here is what I did so far

  But it is not possible to apply a border and the fixed sizes are also problematic.

      nav {
         float: left;
         position: absolute;
         background-color: #ffffff;
         top: 0;
         left: 0;
         display: inline;
         padding: 12px;
         padding-right: 0;
         width: auto;
      }
  
      .behind_nav {
         height: 60px;
         width: 523px;
         position: absolute;
         top: 0;
         left: 0;
         border-right: 20px solid transparent;
         border-top: 48px solid white;
      }
  

  .behind_nav is behind <nav> (surprise, surprise). Actually this works well except for the shadow and border problem stated above. Also it is bound to a fixed value, which is problematic. <nav> fits width to content (which might differ due to CMS data / browser)

  解决方案

  Rough demo: http://jsfiddle.net/W82UV/3/

  I think this covers the crux of your difficulties, i.e. the edge skew, drop shadow, and border.

  <div id="top">
      The top bar
  </div>
  <div id="container">
      <div id="background">        
      </div>
      <nav>
          Test
      </nav>
  </div>
  
  #top{  
      background-color: #f0f0f0;
      border-bottom: 1px solid #555;
      box-shadow: 8px 8px 8px #aaa;
  }
  
  #container {
      position: relative;
      top: -1px;
      overflow: hidden;
      height: 96px;
  }
  
  #background {
      background-color: #f0f0f0;
  
      position: absolute;
      top: -1px;
      left: -32px;
      border: 1px solid #555;
  
      width: 400px;
      height: 64px;
      box-shadow: 8px 8px 8px #aaa;
  
     -webkit-transform: skew(-20deg); 
     -moz-transform: skew(-20deg); 
     -o-transform: skew(-20deg);
     -ms-transform: skew(-20deg); 
     transform: skew(-20deg);
  }
  

  Tested in IE 8 (doesn't skew), 9, 10, FF, and Chrome. Note that I would probably rearrange the markup a little to be cleaner for the final solution (better class names and/or IDs), and position everything proportionately.

  这篇关于CSS（3）& HTML剪切边的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！