есть ли способ создать элементы меню, подобные этому
без необходимости использовать изображения? я пробовал играть с атрибутами до и после, но это, похоже, не работает, так как я действительно не знаю, как создавать углы
есть ли способ создать элементы меню, подобные этому
без необходимости использовать изображения? я пробовал играть с атрибутами до и после, но это, похоже, не работает, так как я действительно не знаю, как создавать углы
Сделайте это в css
body{
background : #efefef;
font : .8em sans-serif;
margin: 0;
}
.tab-container{
background : #2BA6CB;
margin: 0;
padding: 0;
max-height: 35px;
}
ul.tabs{
margin: 0;
list-style-type : none;
line-height : 35px;
max-height: 35px;
overflow: hidden;
display: inline-block;
padding-right: 20px
}
ul.tabs > li.active{
z-index: 2;
background: #efefef;
}
ul.tabs > li.active:before{
border-color : transparent #efefef transparent transparent;
}
ul.tabs > li.active:after{
border-color : transparent transparent transparent #efefef;
}
ul.tabs > li{
float : right;
margin : 5px -10px 0;
border-top-right-radius: 25px 170px;
border-top-left-radius: 20px 90px;
padding : 0 30px 0 25px;
height: 170px;
background: #ddd;
position : relative;
box-shadow: 0 10px 20px rgba(0,0,0,.5);
max-width : 200px;
}
ul.tabs > li > a{
display: inline-block;
max-width:100%;
overflow: hidden;
text-overflow: ellipsis;
text-decoration: none;
color: #222;
}
ul.tabs > li:before, ul.tabs > li:after{
content : '';
background : transparent;
height: 20px;
width: 20px;
border-radius: 100%;
border-width: 10px;
top: 0px;
border-style : solid;
position : absolute;
}
ul.tabs > li:before{
border-color : transparent #ddd transparent transparent;
-webkit-transform : rotate(48deg);
left: -23px;
}
ul.tabs > li:after{
border-color : transparent transparent transparent #ddd;
-webkit-transform : rotate(-48deg);
right: -17px;
}
/* Clear Fix took for HTML 5 Boilerlate*/
.clearfix:before, .clearfix:after { content: ""; display: table; }
.clearfix:after { clear: both; }
.clearfix { zoom: 1; }
И добавьте этот html:
<div class=tab-container>
<ul class="tabs clearfix" >
<li>
<a href=# >Users</a>
</li>
<li class=active >
<a href=# >Pending Lots</a>
</li>
<li>
<a href=# >Nearby Lots</a>
</li>
<li>
<a href=# >Recent Lots</a>
</li>
</ul>
</div>
<div class=outer-circle></div>
Это приведет к:
Источник: Есть ли способ создать хромированная вкладка с использованием css?