如何使角色选项卡这样使用CSS? [英] How to make angled tab like this using css?
本文介绍了如何使角色选项卡这样使用CSS?的处理方法,对大家解决问题具有一定的参考价值,需要的朋友们下面随着小编来一起学习吧!
问题描述
我需要这样做。可以用纯CSS吗?
I need to make like this. Is it possible with pure css?
推荐答案
使用 border-radius
,:before
和 transform:skew(...);
body {
background-color: #000;
margin: 0;
padding: 0;
font-family: sans-serif;
font-size: 16px;
}
.tab {
height: 50px;
width: 150px;
border-radius: 15px 15px 0px 0px;
background-color: #FFF;
position: relative;
top: 10px;
left: 1px;
display: inline-block;
z-index: 2;
}
.tab:before {
height: 50px;
width: 70px;
border-radius: 10px 10px 0px 0px;
background-color: white;
content: "";
position: absolute;
left: 104px;
top: 0px;
-webkit-transform: skewX(40deg);
transform: skewX(40deg);
z-index: -1;
}
.tab:nth-of-type(2) {
background-color: #555;
top: 10px;
left: 30px;
z-index: 1;
color: #EEE;
}
.tab:nth-of-type(2):before {
background-color: #555;
}
.tab:nth-of-type(2):hover,
.tab:nth-of-type(2):hover:before {
background-color: #159;
transition: 0.3s ease-out;
}
span {
display: inline-block;
width: 160px;
text-align: center;
height: 50px;
line-height: 50px;
z-index: 3;
}
#page {
background-color: white;
height: calc(100vh - 120px);
width: calc(100vw - 61px);
position: relative;
top: 10px;
left: 1px;
padding: 30px;
}
<nav id="tabs">
<div class="tab">
<span>Tab 1</span>
</div>
<div class="tab">
<span>Tab 2</span>
</div>
</nav>
<div id="page">
Lorem Ipsum dolor sit amet ...
</div>
这篇关于如何使角色选项卡这样使用CSS?的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!
查看全文