Html 使用CSS创建自定义形状

有谁能告诉我，是否有可能只使用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>

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

---

如果有人能告诉我我是如何理解这一点的，我将不胜感激。

不是100%确定你所说的“底部太宽”是什么意思，但你是否尝试过使用边距

左边距：5px； 这似乎更接近您的图片，但仍然有点太圆。

使用一个值，它有一个圆形半径，使用两个值，您可以定义椭圆半径

因此，您只需更改半径定义，如下所示：

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

这是它的外观，但现在你只需要找出什么半径最适合你的设计

---

您可以尝试下面的代码

.content.nav选项卡{
背景：#DD5B；
填充：15px0；
溢出：隐藏；
}
.content.nav选项卡>li{
浮动：左；
列表样式：无；
左边距：12px；
}
.content.nav选项卡>li>a{
填充：5px40px 10px；
背景：#eaedf2；
边框：1px实心#a48686；
边框底部：无；
边界半径：5px5px0；
文字装饰：无；
颜色：灰色；
显示：块；
位置：相对位置；
}
.content.nav选项卡>li>a:之后{
内容：“；
位置：绝对位置；
右：-8px；
顶部：-2px；
高度：40px；
宽度：10px；
背景：#eaedf2；
边界半径：0 20px 0 0；
-webkit变换：旋转（-10度）；
-moz变换：旋转（-10度）；
变换：旋转（-10度）；
边框：1px实心#a48686；
左边界：无；
z指数：1；
}
.content.nav选项卡>li>a:之前{
内容：“；
位置：绝对位置；
左：-8px；
顶部：-2px；
高度：40px；
宽度：10px；
背景：#eaedf2；
边界半径：20px 0；
-webkit变换：旋转（10度）；
-moz变换：旋转（10度）；
变换：旋转（10度）；
边框：1px实心#a48686；
边界权：无；
}
.content.nav选项卡>li>a:悬停{
z指数：1
}

以下是一些让您开始学习的内容：

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

---

只要乱弄这些值就可以得到你需要的坡度

我使用CSS

边框半径和伪元素获得了选项卡的形状：

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

你可以这样做

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>

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

这是一把小提琴，花了我一段时间，代码有点混乱，但你会明白的

CSS:

HTML:


表1
表2
表3

1（一）个标签：


我是付账单
是否可以在制表符周围添加边框？@TNK是的，但边框不会应用于pseuso元素，因此制表符的倾斜侧仍然没有边框。这很好。。但是有一件事，我们可以改变列表项的顺序吗。这意味着你已经从右向左做了。我们能把它改成从左到右吗？太好了。非常感谢欢迎：），如果答案正确，你能接受吗。
.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);
}

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

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

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