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

Question

我找不到使用CSS绘制Firefox标签形状的非丑陋（无额外标记或固定宽度）方式。

即使Mozilla也使用png图像。

Answer 1

如果您使用基本<nav>或列表（<ul>），则可以通过单个链接（<a>）和伪元素DEMO来实现此目的

＆＃13;

＆＃13;

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

＆＃13;

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

＆＃13;

＆＃13;

＆＃13;

将border-radius调整为您要查找的形状

Answer 2

Codepen Demo

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

＆＃13;

＆＃13;

@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);
}

＆＃13;

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

＆＃13;

＆＃13;

＆＃13;

这是一个非常hacky的解决方案，并使用子弹（•）来覆盖div。但它的确有效。 你将不得不玩它，直到找到你希望它如何工作。