Hide the right box shadow for making vertical tab

Question

I want to make a vertical tab like this site but i can not to hide the right shadow of the a tag and the left shadow of the box at that point. here is jsfiddle code

Answer 1

This should get you going: Fiddle Fork

The main box shadow has to lie underneath the "tabs", while the content that appears inside the box has to layover them. The only way to achieve this is to give the main content a lower z-index than the tabs.

The trick is to use overflow:hidden along with a defined size for your li elements. This causes the part of the shadow that goes out of the prescribed boundaries to get cut off.

CSS

.chooseLogo li{
    list-style: none outside none;
    list-style: none;
    margin-top:0px;
    padding-top:10px;
    overflow:hidden;
    width:60px;
    height:30px;
}

.chooseLogo a{
    background: none repeat scroll 0 0 #fff;
    border-radius: 0 3px 3px 0;
    box-shadow: 0 0 10px #777;
    padding: 2px 20px 1px;
    position: relative;
    text-decoration: none;
    z-index:10;
}

.mainContent{
    width:610px;
    height:371px;
    border-radius: 0px 4px 4px 4px;
    box-shadow: 0 0 5px #999;
    position: absolute;
    left:60px;
    background-color:white;
    z-index:1;
}

Answer 2

DEMO for the fun cause it is not pixel perfect.

you can simplify your markup and dispatch and tune box-shadow and backgrounds.

HTML

<div class="container">
  <ul>
    <li> <a href> link item</a></li>
    <li> <a href> link item</a></li>
    <li> <a href> link item</a></li>
  </ul>
  <div class="content">
    <p>Content</p>
  </div>
</div>

CSS

.container {
  width:80%;
  margin:1em auto;
  box-shadow:2px -2px 1px;
  border-radius:1em;
}
ul {
  margin:0 0 0 -2px;
  padding: 1em ;
  border-radius:1em 0 0 1em;
  float:left;
  box-shadow:-2px 1px 1px 1px;
  background:white;
    position:relative;
}
.content {
  overflow:hidden;
  border-radius:0 1em 1em 1em;
  box-shadow:1px 1px 2px 2px;
  min-height:15em;
}
ul, .content {
  background:turquoise;
}
ul:after {
  content:'';
  height:1.2em;
  width:2em;
  top:100%;
  margin-top:1px;
  right:1px;
  position:absolute;
  float:right;
  border-radius:0 1em 0 0;
  box-shadow: 1px -1px 1px,
    4px -4px 0 4px turquoise;
}
li {
  margin:1em 0 ;
}

body {
  background:#888;
}

Notice: the use of z-index as well to hide some parts.(as said earlier by Austin Mullins and Filth)