【问题标题】:Is it possible to create the Firefox tab using CSS ? [duplicate]是否可以使用 CSS 创建 Firefox 选项卡? [复制]
【发布时间】:2016-01-27 09:25:10
【问题描述】:

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

甚至 Mozilla 也使用 png 图像。

【问题讨论】:

  • 你能用 svg 吗?
  • @JacobGray 好主意。
  • @j08691 请阅读标题。
  • 我做到了。所以答案是肯定的。要不要我把它放在下面以便你选择它?
  • 如果您使用 SVG,here is an example 的形状可能可以用作启动板。

标签: css css-shapes


【解决方案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>

将边框半径调整为您要查找的形状

【讨论】:

  • 我可以在这里闻到一个 Firefox 开发者的味道... ;)
  • @Christoph 一个非 firefoxe 测试人员会做的更像 codepen.io/anon/pen/KdRNNg 当然 ;)
  • +1 非常接近! ;) 当更多地摆弄这些值时,可能会移除粗糙的边缘,但做得很好。或者,可以使用边框图像或剪辑路径 (in probably 1 or two years... :-D)
  • 非常感谢,太好了,我会尽量减少标记。
  • 结果并不完全相同。问题中的左右边缘是倾斜的,而不仅仅是弯曲的。
【解决方案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。但它有效。 您将不得不玩弄它,直到找到您想要的工作方式。

【讨论】:

  • 结果并不完全相同。问题中的左右边缘是倾斜的,而不仅仅是弯曲的。
猜你喜欢
  • 2014-09-02
  • 2022-01-01
  • 1970-01-01
  • 1970-01-01
  • 1970-01-01
  • 1970-01-01
  • 1970-01-01
  • 1970-01-01
  • 2011-05-14
相关资源
最近更新 更多