A Pen by Andre Rodrigues on CodePen.
Created
July 1, 2021 14:09
-
-
Save joceilton/2c93d557f0783e9d6435698f25fa01e4 to your computer and use it in GitHub Desktop.
Estilo de menu tabs com setas no after e before
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| <div class="container"> | |
| <ul class="container_tabs"> | |
| <li class="tabs"> <a href="">Clique aqui</a></li> | |
| <li class="tabs"> <a href="">Clique aqui</a></li> | |
| <li class="tabs"> <a href="">Clique aqui</a></li> | |
| </ul> | |
| <div class="content"> | |
| <p>Aqui você trata suas tabs</p> | |
| </div> | |
| </div> |
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| *{ | |
| box-sizing: border-box; | |
| font-size: 100%; | |
| line-height: 1.5; | |
| margin: 0; | |
| padding: 0; | |
| } | |
| body{ | |
| background-color: #0ebeff; | |
| display: flex; | |
| flex; 1; | |
| justify-content: center; | |
| } | |
| /*Tabs*/ | |
| .container{ | |
| background-color: #fff; | |
| border-radius: 8px; | |
| box-shadow: 1px 3px 6px 0 #00000029; | |
| margin-top: 2rem; | |
| min-height: 60vh; | |
| width: 400px; | |
| } | |
| .container_tabs{ | |
| display: flex; | |
| margin: 20px auto; | |
| width: 90%; | |
| } | |
| .tabs{ | |
| background-color: orange; | |
| list-style:none; | |
| margin: 0 10px; | |
| position: relative; | |
| } | |
| .tabs::after{ | |
| background-color: orange; | |
| clip-path: polygon(75% 76%, 87% 87%, 75% 100%); | |
| content: ""; | |
| height: 100px; | |
| position: absolute; | |
| right: -25px; | |
| top: -76px; | |
| width: 100px; | |
| } | |
| .tabs::before{ | |
| background-color: orange; | |
| clip-path: polygon(79% 73%, 78% 100%, 57% 100%, 68% 86%, 58% 73%); | |
| content: ""; | |
| height: 89px; | |
| position: absolute; | |
| left: 35px; | |
| top: -65px; | |
| width: 100px; | |
| } | |
| .tabs:first-child{ | |
| margin-left: 0; | |
| } | |
| .tabs:last-child::before{ | |
| background-color: transparent; | |
| } | |
| .tabs a{ | |
| font-size: 0.85em; | |
| font-family: arial; | |
| padding: 10px | |
| } | |
| .content{ | |
| background-color: #eee; | |
| margin: 0 auto; | |
| min-height: 30vh; | |
| padding: 10px; | |
| width: 90%; | |
| } |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment