Comment faire un onglet incliné comme ça en utilisant css?

J'ai besoin de faire comme ça. Est-il possible avec de la pure css?

Comment faire un onglet incliné comme ça en utilisant css?

source d'informationauteur Jitendra Vyas

  1. 6

    Avec CSS3, utilisez border-radius de faire la courbe de l'onglet coin, puis créer un triangle avec une baisse de la z-index.

    Le code HTML:

    <div class="tab">
    <div class="arrow"></div>
</div>

    Le CSS:

    body
{
    background-color: #666;    
}
.tab
{
    height: 50px;
    width: 150px;
    border-radius: 10px 10px 0px 0px;
    background-color: #FFF;
    position: relative;
}

.arrow
{
  border-color: transparent transparent #FFF #FFF;
  border-style: solid;
  border-width: 23px 23px 23px 23px;
  height:0;
  width:0;
  position:absolute;
  bottom:0px;
  right:-43px;
}

    Le résultat: http://jsfiddle.net/P3P3Z/2/

    Il n'est pas parfait et il peut s'afficher différemment sur différents navigateurs, mais devrait vous obtenir a commencé. 🙂 Certaines choses doivent être tordu un peu, donc il a l'air sympa.

    J'ai fait une bibliothèque dynamique qui gère CSS triangles: http://www.rosefalk.dk/library/base/index.html. (voir sous Babiole).

  2. 2

    Cette question m'a intrigué donc, ici, est un exemple de travail.

    <html>
<style type="text/css">
body {
background: #000000;
}
#header {
height: 29px;
overflow: hidden;
}
#content {
background: #ffffff;
min-height: 200px;
padding: 10px;
border-top-right-radius: 10px;
border-top-right-radius: 10px;
}
#on {
background: #ffffff;
display: inline-block;
padding: 5px;
border-top-left-radius: 10px;
border-top-right-radius: 10px;
vertical-align: top;
}
#off {
background: #888888;
display: inline-block;
padding: 5px;
border-top-left-radius: 10px;
border-top-right-radius: 10px;
vertical-align: top;
margin-left: -40px;
}
#seperatoron {
border: none;
border-left: 25px solid white;
border-bottom: 0px;
height: 0px;
width: 0px;
display: inline-block;
position: relative;
margin-top: 10px;
border-right: 25px solid transparent;
border-top: 25px solid transparent;
margin-top: 4px;
margin-left: -2px;
}
#seperatoroff {
border: none;
border-left: 25px solid #888888;
border-bottom: 0px;
height: 0px;
width: 0px;
display: inline-block;
position: relative;
margin-top: 10px;
border-right: 25px solid transparent;
border-top: 25px solid transparent;
margin-top: 4px;
margin-left: -2px;
}
</style>
<body>
<div id="header">
<div id="on">Tab 1</div><div id="seperatoron"></div>
<div id="off">Tab 2</div><div id="seperatoroff"></div>
</div>
<div id="content">
Document content section.
</div>
</body>
</html>
  3. 1

    La bordure arrondie dans le coin supérieur gauche est possible avec le border-radius de la propriété (pas dans les anciennes versions IE). Cependant, le côté droit de chaque onglet doit être fait avec une image, svg ou une rotation de div avec une css3 transformer, mais qui vous donnera des maux de tête pour vous.

    Si j'étais vous, j'irais pour un border radius pour topleft et un background-image alignée à droite:

    border-top-left-radius: 10px;
background: white url(tab.gif) right top no-repeat;

    Je pense que vous devriez aussi donner le deuxième onglet négative de la marge de gauche.

  4. 0

    Voici la fenêtre tapé boutons de l'onglet css

    .tablist{
padding:0;
margin:0;
list-style:none;
display:flex;
justify-content:center;
}
.tablist>li{
}
.tablist >li>a{
position: relative;
display: block;
color: red;
text-decoration: none;
line-height: 1.4;
border-top: 1px solid red;
border-radius: 6px 6px 0 0;
padding: 3px 10px;
margin: 0 5px;
}
.tablist >li>a:before{
position: absolute;
content: "";
width: 9px;
height: 29px;
background: white;
transform: rotate(21deg);
border-left: 1px solid red;
left: -5px;
top: 2px;
z-index: -1;
border-radius: 2px 0 0 0px;
}
.tablist >li>a:after{
position: absolute;
content: "";
width: 9px;
height: 29px;
background: white;
transform: rotate(-21deg);
border-right: 1px solid red;
right: -5px;
top: 2px;
z-index: -1;
border-radius: 2px 0 0 0px;
}

    Et le html sera comme ceci

    <ul class="tablist">
<li><a href="jasscript:void(0)">Home</a></li>
<li><a href="jasscript:void(0)">About</a></li>
<li><a href="jasscript:void(0)">Contact us</a></li>
<li><a href="jasscript:void(0)">Blog</a></li>
<li><a href="jasscript:void(0)">Home</a></li>
</ul>