Create tabs with merge area

Question

How can I create Tabs with Angular-Material look like this picture below : (I don't know how to describe it in English so I call it is "merges tab" )

Answer 1

这是对它的抨击 - CodePen。我认为可以改进。

标记

                                  

一些描述

                                                    标签一                                           表二                                           表三                                           表四                        

CSS

#myTabs {
  margin-top: -40px;
  z-index: 0;
}

#myTabs md-tab-item {
  border: 1px solid black;
}

#myTabs md-tabs-canvas, 
#myTabs md-pagination-wrapper {
  height: 100px
}

#myTabs .md-tab {
  line-height: 80px
}

#tabsDescription {
  height: 40px;
  z-index: 1;
  text-align: center;
}

#tabsDescription {
  margin-left: -20px;
  background: white;
  height: 40px;
  width: 4px;
  text-align: center;
}

#tabsDescription p {
  margin: 5px -60px;
  white-space: nowrap;
}