样式导航按钮与css shap与渐变，渐变背景和居中的文本

Question

所以我试图在不使用图像的情况下制作导航按钮。但是我无法让CSS正常运行。我设法获得除了文本的垂直对齐之外的所有内容，但是到目前为止，我觉得代码变得比必要的更加草率。这就是我所拥有的：

＆＃13;

＆＃13;

.nav_button {
  height: 18px;
  background: linear-gradient(#3D3C3B 0%, #0A0B0A 50%);
  margin-top: 5px;
}

.arrow_container {
  display: inline-block;
  width: 35px;
}

.nav_arrow {
  width: 20px;
  height: 18px;
  background: linear-gradient(#D2DA76 0%, #5EB649 50%);
}

.nav_link {
  display: inline-block;
  width: 125px;
  text-align: center;
}

.nav_arrow::after {
  display: block;
  content: '';
  height: 18px;
  width: 20px;
  background: linear-gradient(to bottom right, #D2DA76 0%, #5EB649 50%);
  transform: translate(10px, 0px) scale(.8, .715) rotate(45deg);
}

＆＃13;

<a href='#'>
  <div class='nav_button'><span class='arrow_container'><div class='nav_arrow'></div></span><span class='nav_link'>Test</span></div>
</a>

＆＃13;

＆＃13;

＆＃13;

有没有更好的方法来写这个？如果不是我至少需要知道如何垂直对齐文本。行高不起作用。

编辑：这是一张演示图片。箭头向后但它已经接近了。

Answer 1

尝试垂直对齐按钮内的文本。

＆＃13;

＆＃13;

.nav_button {
  height: 18px;
  background: linear-gradient(#3D3C3B 0%, #0A0B0A 50%);
  margin-top: 5px;
}

.arrow_container {
  display: inline-block;
  width: 35px;
}

.nav_arrow {
  width: 20px;
  height: 18px;
  background: linear-gradient(#D2DA76 0%, #5EB649 50%);
}

.nav_link {
  display: inline-block;
  width: 125px;
  text-align: center;
  vertical-align:top;
}

.nav_arrow::after {
  display: block;
  content: '';
  height: 18px;
  width: 20px;
  background: linear-gradient(to bottom right, #D2DA76 0%, #5EB649 50%);
  transform: translate(10px, 0px) scale(.8, .715) rotate(45deg);
}

＆＃13;

<a href='#'>
  <div class='nav_button'><span class='arrow_container'><div class='nav_arrow'></div></span><span class='nav_link'>Test</span></div>
</a>

＆＃13;

＆＃13;

＆＃13;

Answer 2

更好的解决方案可能是实际构建相对于文本行高的大小的按钮结构，而不是尝试对大小进行硬编码，然后再更新行高。

html的简化基于我们在按钮上使用单个渐变叠加而不是将按钮背景和“箭头”部分单独淡化为不同颜色的想法。但是，这并不完全匹配设计。

.nav_button_alt{
	display:inline-block;
	border:1px solid #888;
	color:#FFF;
	text-decoration:none;
	font-family:Helvetica, Arial, sans-serif;
	position:relative;
	background:#5EB649;
	font-size:1.2em;
	line-height:1.4em;
	padding:0 0.2em 0 40px;
	min-width:125px; /* remove this if you wish the buttons to be relative to the size of the text*/
}
.nav_button_alt > span{
	display:inline-block;
	position:relative;
	width:100%;
	z-index:3;
  text-align:center;
}
/* provides the fade */
.nav_button_alt:before{
	content:"";
	position:absolute;
	top:0;
	left:0;
	right:0;
	z-index:2;
	height:100%;
	background-image: linear-gradient(rgba(255,255,255,0.6) 0%, rgba(255,255,255,0) 50%);	
}
/* provides the "black" overlay of the green background */
.nav_button_alt:after{
	content:"";
	position:absolute;
	left:1.2em; /* distance from the right that the arrow starts */
	top:0;
	height:0;
	right:0;
	border-left:1em solid transparent; /* size of the green arrow's point */
	border-top:0.7em solid #000; /* half the height of the button */
	border-bottom:0.7em solid #000; /* half the height of the button */
	z-index: 1;
}

<a href="#" class="nav_button_alt">
	<span>Test</span>
</a>

Answer 3

使用“line-height”进行文本的垂直对齐。这是一个例子

Traceback (most recent call last):
File "/home/kristian/.virtualenvs/odoov10/lib/python2.7/site-packages/odoo-10.0rc1c_20161005-py2.7.egg/odoo/http.py", line 638, in _handle_exception
return super(JsonRequest, self)._handle_exception(exception)
File "/home/kristian/.virtualenvs/odoov10/lib/python2.7/site-packages/odoo-10.0rc1c_20161005-py2.7.egg/odoo/http.py", line 675, in dispatch
result = self._call_function(**self.params)
File "/home/kristian/.virtualenvs/odoov10/lib/python2.7/site-packages/odoo-10.0rc1c_20161005-py2.7.egg/odoo/http.py", line 331, in _call_function
return checked_call(self.db, *args, **kwargs)
File "/home/kristian/.virtualenvs/odoov10/lib/python2.7/site-packages/odoo-10.0rc1c_20161005-py2.7.egg/odoo/service/model.py", line 119, in wrapper
return f(dbname, *args, **kwargs)
File "/home/kristian/.virtualenvs/odoov10/lib/python2.7/site-packages/odoo-10.0rc1c_20161005-py2.7.egg/odoo/http.py", line 324, in checked_call
result = self.endpoint(*a, **kw)
File "/home/kristian/.virtualenvs/odoov10/lib/python2.7/site-packages/odoo-10.0rc1c_20161005-py2.7.egg/odoo/http.py", line 933, in __call__
return self.method(*args, **kw)
File "/home/kristian/.virtualenvs/odoov10/lib/python2.7/site-packages/odoo-10.0rc1c_20161005-py2.7.egg/odoo/http.py", line 504, in response_wrap
response = f(*args, **kw)
File "/home/kristian/odoov10/odoo-10.0rc1c-20161005/odoo/addons/web/controllers/main.py", line 866, in call_button
action = self._call_kw(model, method, args, {})
File "/home/kristian/odoov10/odoo-10.0rc1c-20161005/odoo/addons/web/controllers/main.py", line 854, in _call_kw
return call_kw(request.env[model], method, args, kwargs)
File "/home/kristian/.virtualenvs/odoov10/lib/python2.7/site-packages/odoo-10.0rc1c_20161005-py2.7.egg/odoo/api.py", line 679, in call_kw
return call_kw_model(method, model, args, kwargs)
File "/home/kristian/.virtualenvs/odoov10/lib/python2.7/site-packages/odoo-10.0rc1c_20161005-py2.7.egg/odoo/api.py", line 662, in call_kw_model
recs = self.with_context(context or {})
File "/home/kristian/.virtualenvs/odoov10/lib/python2.7/site-packages/odoo-10.0rc1c_20161005-py2.7.egg/odoo/models.py", line 4850, in with_context
context = dict(args[0] if args else self._context, **kwargs)
TypeError: cannot convert dictionary update sequence element #0 to a sequence

div {
  height: 90px;
  line-height: 90px;
  text-align: center;
  border: 2px dashed #f69c55;
}