谁能告诉我是否可以仅使用 CSS 制作形状(如附图)。
这是形状 -
我尝试使用 css
border-radius
将其存档然后它就关闭了。但底部形状较宽,需要增加一点。 (见图)
到目前为止,这是我的代码 -
HTML :
<ul class="nav nav-tabs" role="tablist">
<li class="active"><a href="" >content</a></li>
<li><a href="#">content</a></li>
<li><a href="#">content</a></li>
<li><a href="#">content</a></li>
</ul>
CSS:
.content .nav-tabs {
background: #dd5b5b;
padding: 15px 0 5px 0;
overflow: hidden;
}
.content .nav-tabs > li {
float: left;
list-style: none;
}
.content .nav-tabs > li > a {
padding: 5px 40px 10px;
background: #eaedf2;
border: 1px solid #a48686;
border-bottom: none;
border-top-right-radius: 2em;
border-top-left-radius: 1.5em;
text-decoration: none;
color: gray;
}
如果有人能告诉我我是如何解决这个问题的,我们将不胜感激。
最佳答案
你可以试试下面的代码。
.content .nav-tabs {
background: #dd5b5b;
padding: 15px 0 0 0;
overflow: hidden;
}
.content .nav-tabs>li {
float: left;
list-style: none;
margin-left: 12px;
}
.content .nav-tabs>li>a {
padding: 5px 40px 10px;
background: #eaedf2;
border: 1px solid #a48686;
border-bottom: none;
border-radius: 5px 5px 0 0;
text-decoration: none;
color: gray;
display: block;
position: relative;
}
.content .nav-tabs>li>a:after {
content: " ";
position: absolute;
right: -8px;
top: -2px;
height: 40px;
width: 10px;
background: #eaedf2;
border-radius: 0 20px 0 0;
-webkit-transform: rotate(-10deg);
-moz-transform: rotate(-10deg);
transform: rotate(-10deg);
border: 1px solid #a48686;
border-left: none;
z-index: 1;
}
.content .nav-tabs>li>a:before {
content: " ";
position: absolute;
left: -8px;
top: -2px;
height: 40px;
width: 10px;
background: #eaedf2;
border-radius: 20px 0 0 0;
-webkit-transform: rotate(10deg);
-moz-transform: rotate(10deg);
transform: rotate(10deg);
border: 1px solid #a48686;
border-right: none;
}
.content .nav-tabs>li>a:hover {
z-index: 1
}
<div class="content">
<!-- Nav tabs -->
<ul class="nav nav-tabs" role="tablist">
<li class="active"><a href="#home" role="tab" data-toggle="tab">content</a></li>
<li class="active"><a href="#home" role="tab" data-toggle="tab">content2</a></li>
<li class="active"><a href="#home" role="tab" data-toggle="tab">content2</a></li>
<li class="active"><a href="#home" role="tab" data-toggle="tab">content2</a></li>
</ul>
</div>
<!-- /.content -->
关于html - 使用 CSS 创建自定义形状,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/24623775/