CSS问题与图像

Question

如何制作。

.l {
  float: left
}
.abs {
  position: absolute
}
.rl {
  position: relative
}
.r {
  float: right
}
.f {
  clear: both
}
.menuItem {
  border-bottom: 1px #ccc solid
}
.menuItem .p {
  padding: 10px 10px;
  font-weight: bold;
  font-size: 12px
}
.menuItem .active {
  color: #333;
  cursor: default
}
.menuItem a {
  display: block;
  text-decoration: none;
  cursor: pointer
}
.menuItem .p:hover {
  background-color: #f5f5f6;
  text-decoration: none
}

<div class='menuItem'>
  <div class='l' style='margin-left:120px'>&nbsp;</div>
  <div class='l p active'>Info
    <a href="<% $URL %><% $_GET[0] %>" class="active b"></a>
  </div>
  <a href="<% $URL %><% $_GET[0] %>/forums">
    <div class='l p'>Forums (105)</div>
  </a>
  <div class='f'></div>
</div>

http://jsfiddle.net/AndyPSV/6gh2dfm4/1/

（中心位置）.active下的图像：

（白色背景，与border_bottom一致）

当你将鼠标悬停在所有活动状态时

和背景：#fff

Answer 1

一个简单的解决方案是创建一个三角形的小图像，并使用类background上的.active css属性将该图像定位在底部的中间。将鼠标悬停在.active上时，您可以将背景设置为无。例如：

.active {
  background: url('http://placehold.it/9x9') center bottom no-repeat;
}
.active:hover {
  background: none;
}

另一种选择可能是根本不使用图像，而是使用css在:after选择器中创建三角形。

＆＃13;

＆＃13;

.l {
  float: left
}
.abs {
  position: absolute
}
.rl {
  position: relative
}
.r {
  float: right
}
.f {
  clear: both
}
.menuItem {
  border-bottom: 1px #ccc solid
}
.menuItem .p {
  padding: 10px 10px;
  font-weight: bold;
  font-size: 12px
}
.menuItem .active {
  color: #333;
  cursor: default
}
.menuItem a {
  display: block;
  text-decoration: none;
  cursor: pointer
}
.menuItem .p:hover {
  background-color: #f5f5f6;
  text-decoration: none
}

.active {
  background: url('http://placehold.it/9x9') center bottom no-repeat;
}
.active:hover {
  background: none;
}

＆＃13;

<div class='menuItem'>
  <div class='l' style='margin-left:120px'>&nbsp;</div>
  <div class='l p active'>Info
    <a href="<% $URL %><% $_GET[0] %>" class="active b"></a>
  </div>
  <a href="<% $URL %><% $_GET[0] %>/forums">
    <div class='l p'>Forums (105)</div>
  </a>
  <div class='f'></div>
</div>

＆＃13;

＆＃13;

＆＃13;

Answer 2

您可以使用:pseudo元素在底部添加三角形

＆＃13;

＆＃13;

.l {
  float: left;
  position: relative;
}
.abs {
  position: absolute
}
.rl {
  position: relative
}
.r {
  float: right
}
.f {
  clear: both
}
.menuItem {
  border-bottom: 1px #ccc solid
}
.menuItem .p {
  padding: 10px 10px;
  font-weight: bold;
  font-size: 12px
}
.menuItem .active {
  color: #333;
  cursor: default
}
.menuItem a {
  display: block;
  text-decoration: none;
  cursor: pointer
}
.menuItem .p:hover {
  background-color: #f5f5f6;
  text-decoration: none
}
.l.active:after {
  content: '';
  bottom: -1px;
  width: 0;
  height: 0;
  position: absolute;
  border-style: solid;
  border-width: 0px 9px 10px 9px;
  border-color: rgb(233, 234, 237) transparent;
  left: 50%;
  margin-left: -11px;
}
.l.active:before {
  content: '';
  bottom: -1px;
  width: 0;
  height: 0;
  position: absolute;
  border-style: solid;
  border-width: 0px 10px 11px 10px;
  border-color: #ccc transparent;
  left: 50%;
  margin-left: -12px;
}

＆＃13;

<div class='menuItem'>
  <div class='l' style='margin-left:120px'>&nbsp;</div>
  <div class='l p active'>Info
    <a href="<% $URL %><% $_GET[0] %>" class="active b"></a>

  </div>
  <a href="<% $URL %><% $_GET[0] %>/forums">
    <div class='l p'>Forums (105)</div>
  </a>

  <div class='f'></div>
</div>

＆＃13;

＆＃13;

＆＃13;