是否可以使用 CSS 创建 Firefox 选项卡？

Question

我找不到一种不丑陋（没有额外标记或固定宽度）的方法来使用 CSS 绘制 Firefox 选项卡形状。

甚至 Mozilla 也使用 png 图片。

Answer 1

如果您使用基本的 <nav> 或列表 (<ul>) ，您可以通过单个 link(<a>) 和伪元素 DEMO

nav,
ul {
  padding: 0 0 0.25em;
}

li {
  display: inline-block;
  padding: 0 1.2em;
}

li a {
  display: inline-block;
  line-height: 2em;
  color: white;
  padding: 0 0.5em;
  border-radius: 0 0 2em 2em/2.5em;
  position: relative;
}

li a:before,
li a:after {
  content: '';
  position: absolute;
  height: 2em;
  width: 1.25em;
  top: 0;
}

li a:before {
  right: 100%;
  border-radius: 0 1em 0 0/1.5em
}

li a:after {
  left: 100%;
  border-radius: 1em 0 0 0/1.5em
}

nav {
  background: #0976B8;
}

li a:hover,
li a.active {
  background: white;
  color: #0976B8
}

li a:hover:before,
li a.active:before {
  box-shadow: 0.5em -1em 0 white;
}

li a:hover:after,
li a.active:after {
  box-shadow: -0.5em -1em 0 white;
}

<nav>
 <ul>
  <li><a href="#">Home</a></li>
  <li><a href="#" class="active">About</a></li>
  <li><a href="#">Clients</a></li>
  <li><a href="#">Contact Us</a></li>
 </ul>
</nav>

将边界半径调整为您要寻找的形状

Answer 2

Codepen Demo

好吧，我想出了一个非常混乱的解决方案，但是，它只需要一个 HTML 元素：

@charset "UTF-8";
body, html {
  margin: 0;
  width: 100%;
  height: 100%;
  background: #079FD9;
}

div {
  background: white;
  /*Note that if you change this color, make sure you change the background of the pseudo  elements*/
  display: inline-block;
  padding: 10px;
  padding-right: 20px;
  /*These paddings are to make sure the pseudo  elements do not overlap the text*/
  padding-left: 20px;
  border-radius: 0 0 10px 10px;
  position: relative;
  margin-left: 30px;
  color: #079FD9;
  font-family: open sans;
  /*This is, of course, optional*/
  font-size: 16pt;
}
div:before, div:after {
  content: "•";
  /*Very Hacky*/
  font-family: Times New Roman !important;
  /*Makes sure the font won't mess it up*/
  color: #079FD9;
  /*Change this to the background color *around* the element*/
  font-size: 200px;
  line-height: 7px;
  position: absolute;
  overflow: hidden;
  top: 0px;
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
      user-select: none;
  width: 30px;
  height: 30px;
  background: white;
}
div:after {
  right: -19px;
  -webkit-transform: rotateX(180deg);
  transform: rotateX(180deg);
}
div:before {
  left: -19px;
  -webkit-transform: rotateY(180deg) rotateX(180deg);
  transform: rotateY(180deg) rotateX(180deg);
}

<link href='https://fonts.googleapis.com/css?family=Open+Sans' rel='stylesheet' type='text/css'>
<div>Mozilla</div>

这是一个非常hacky的解决方案，使用子弹(•)覆盖div。但它有效。您将不得不尝试使用它，直到找到您想要它的工作方式。

是否可以使用 CSS 创建 Firefox 选项卡？

Is it possible to create the Firefox tab using CSS ?

css

css-shapes

Codepen Demo