是否可以使用 CSS 创建 Firefox 选项卡？ [复制]

Question

我找不到用 CSS 绘制 Firefox 选项卡形状的不难看（没有额外标记或固定宽度）的方法。

甚至 Mozilla 也使用 png 图像。

Answer 1

如果您使用基本的 <nav> 或列表 (<ul>) ，则可以通过单个链接 (<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。但它有效。 您将不得不玩弄它，直到找到您想要的工作方式。