병합 영역에 탭 만들기

Question

나는 아래의이 그림 같은 각도-재료 모양 탭을 만들 수있는 방법 : 는 (나는 "탭을 병합"그래서 그것이 전화 영어로 그것을 설명하는 방법을 모른다)

Answer 1

여기에 찔러 넣기 - CodePen입니다. 나는 그것이 향상 될 수 있다고 생각한다.

마크 업

일부 설명

탭 하나 ,탭 두 탭 세 탭

#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; 
}