使用CSS创建自定义形状

Question

任何人都可以告诉我是否可以仅使用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;
}

JS BIN

如果有人能告诉我如何解决这个问题，我们将非常感激。

Answer 1

您可以尝试以下代码。

＆＃13;

＆＃13;

.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
}

＆＃13;

<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 -->

＆＃13;

＆＃13;

＆＃13;

Answer 2

您可以执行此demo中显示的内容。

HTML：（根据您的加价更新）

<div class='content'>
    <ul class="nav nav-tabs" role="tablist">
        <li class="active tabHdr"><a href="">content</a></li>
        <li class='tabHdr'><a href="#">content</a></li>
        <li class='tabHdr'><a href="#">content</a></li>
        <li class='tabHdr'><a href="#">content</a></li>
    </ul>
</div>

CSS：（需要CSS3）

.content .nav-tabs {
    position: relative;
    z-index: 1;
    background: #dd5b5b;  
    overflow: hidden;
}
.content .nav-tabs > li {
    display: inline-block;
    list-style: none;
    top: 9px;
}
.tabHdr {
    position: relative;
    padding: 2% 2.5%;
    margin: 0% -1%;
}
.tabHdr::before {
    content:'';
    position: absolute;
    top: -4px;
    right: 0px;
    bottom: 0.25em;
    left: 0px;
    z-index: -1;
    -webkit-transform: perspective(25px) rotateX(10deg);
    -moz-transform: perspective(25px) rotateX(10deg);
    -ms-transform: perspective(25px) rotateX(10deg);
    -o-transform: perspective(25px) rotateX(10deg);
    transform: perspective(25px) rotateX(10deg);
    -webkit-transform-origin: bottom;
    -moz-transform-origin: bottom;
    -ms-transform-origin: bottom;
    transform-origin: bottom;
    background-color: #eaedf2;
    border-width: 2px 2px 0px 2px;
    border-color: #a48686;
    border-style: solid;
    border-radius: 8px;
    color: gray;
}
.active{
    z-index: 2;
}

更新： Full Demo

Answer 3

我使用CSS border-radius和伪元素

获得了标签的形状

.content .nav-tabs > li > a {
  padding: 5px 40px 10px;
  background: #eaedf2;
  text-decoration: none;
  color: gray;
  border-top-left-radius: 14px;
  border-top-right-radius: 14px;
  margin-left: 15px;
  position: relative;
}

.content .nav-tabs > li > a:before,
.content .nav-tabs > li > a:after {
  content: "";
  position: absolute;
  bottom: 0;
  border-bottom: 1.5em solid #eaedf2;
}

.content .nav-tabs > li > a:before {
  left: -7px;
  border-left: 8px solid transparent;
}

.content .nav-tabs > li > a:after {
  right: -7px;
  border-right: 8px solid transparent;
}

Answer 4

不是100％确定你的意思是“底部太宽”，但是你试过使用边距吗？

margin-left：5px; 这似乎更接近你的画面，但仍然有点过于圆滑。

Answer 5

border-radius can take 1 or 2 values，其中一个值具有圆形半径，有两个可以定义椭圆半径。

所以你只需要更改半径定义，如下所示：

border-top-right-radius: 1em 3em;
border-top-left-radius: 1em 3em;

看看它是什么样的，但you can preview it on jsFiddle.现在你只需要弄清楚哪种半径最适合你的设计。

Answer 6

这里有一些东西让你入门：

.content .nav-tabs > li:after {
  content: "";
  display: inline-block;
  width: 0; 
  height: 0; 
  border-left: 3px solid transparent;
  border-right: 18px solid transparent;
  border-bottom: 30px solid #eaedf2;
  -ms-transform: rotate(-5deg); /* IE 9 */
  -webkit-transform: rotate(-5deg); /* Chrome, Safari, Opera */
  transform: rotate(-5deg);
  margin-left: -15px;
  margin-bottom: -15px;
}

.content .nav-tabs > li:before {
  content: "";
  display: inline-block;
  width: 0; 
  height: 0; 
  border-right: 3px solid transparent;
  border-left: 18px solid transparent;
  border-bottom: 30px solid #eaedf2;
  -ms-transform: rotate(5deg); /* IE 9 */
  -webkit-transform: rotate(5deg); /* Chrome, Safari, Opera */
  transform: rotate(5deg);
  margin-right: -10px;
  margin-bottom: -15px;
}

只需弄清楚价值就可以获得所需的倾斜度！

Answer 7

http://jsfiddle.net/q29X5/1/

这是一个小提琴，它花了我一段时间，代码有点乱，但你会搞清楚。

CSS：

.tabBar {
    background:-webkit-linear-gradient(top, #f55, #d33);
    height:50px;
}
.tabOut {
    display:block-inline;
    float:left;
    position:relative;
    left:10px;
    width:100px;
    /*transform perspective*/
    -webkit-perspective:150px;
    perspective:150px;
    -webkit-perspective-origin:50% 50%;
    perspective-origin:50% 50%;
}
.tabIn {
    background:-webkit-linear-gradient(top, #efefef, #dcdcdc);
    border-radius:10px 10px 0 0;
    width:100px;
    height:50px;
    border:2px solid black;
    border-color:#333 #333 transparent #333;
    /*transforms*/
    -webkit-transform:rotateX(45deg)translate(0px, 2px);
    -webkit-perspective:150px;
    perspective:150px;
    -webkit-perspective-origin:50% 50%;
    perspective-origin:50% 50%;
}
.tabIn .tabText {
    font-size:40px;
    width:100%;
    height:100%;
    display:block;
    text-align:center;
    /*Transform*/
    -webkit-transform:rotateX(-30deg)scale(0.5, 0.8);
}

HTML：

<div class="tabBar">
        <div class="tabOut">
            <div class="tabIn"> <span class="tabText">Tab1</span>

            </div>
        </div>
        <div class="tabOut">
            <div class="tabIn"> <span class="tabText">Tab2</span>

            </div>
        </div>
        <div class="tabOut">
            <div class="tabIn"> <span class="tabText">Tab3</span>

            </div>
        </div>
    </div>

1（一）选项卡：

        <div class="tabOut">
            <div class="tabIn"> <span class="tabText">I'm a tab</span>

            </div>
        </div>
        <div class="tabOut">