Question

如何将我在标签下方使用的图像转换为指向下方的箭头

以上是我的工作实例。标签底部的方块可以将其转换为向下的小箭头吗？ javascript可能无法在那里工作，因为我似乎无法让它在这个网站上工作但在我的网站上工作。

li.current::after { 
    color: transparent;
    content: "";
    position: absolute;
    bottom: -12px;
    left: 0;
    right: 0;
    margin: auto;
    border-width: 15px 15px 0px;
    border-style: solid;
    background-image: url('data:image/png;base64,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')!important;
    background-position-x: -100px;
    width: 0;
}

由于

Answer 1

border-width: 11px 12px 0px 12px;
border-color: #30B3EE transparent;

＆＃13;

ul.tabs {
  margin: 0px;
  padding: 0px;
  list-style: none;
}
ul.tabs li {
  background: none;
  color: #222222;
  display: inline-block;
  padding: 10px 15px;
  cursor: pointer;
  background-image: url('data:image/png;base64,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')!important;
  *background-image: url(../img/sprites/nav.png)!important;
  /* For IE 6 and 7 */
  background-repeat: repeat-x;
  border: 1px solid #189CD7;
  -ms-border-top-left-radius: 5px;
  -webkit-border-top-left-radius: 5px;
  border-top-left-radius: 5px;
  -ms-border-top-right-radius: 5px;
  -webkit-border-top-right-radius: 5px;
  border-top-right-radius: 5px;
  position: relative;
}
li.current::after {
  color: transparent;
  content: "";
  position: absolute;
  bottom: -12px;
  left: 0;
  right: 0;
  margin: auto;
  border-width: 11px 12px 0px 12px;
  border-color: #30B3EE transparent;
  /* background-position-y: -100px; */
  border-style: solid;
  /* border-color: #30B3EE transparent; */
  background-position-x: -100px;
  width: 0;
}
.tab-content {
  display: none;
  padding: 15px;
}
.tab-content.current {
  display: inherit;
}

＆＃13;

<ul class="tabs">
  <li class="tab-link current" data-tab="tab-1">Change Address</li>
  <li class="tab-link" data-tab="tab-2">Change Ownership</li>
  <li class="tab-link" data-tab="tab-3">Re-grade Service</li>
  <li class="tab-link" data-tab="tab-4">Cease Service</li>
</ul>

<div id="tab-1" class="tab-content current">
  Please call us to discuss address changes on 01392 333 333
</div>
<div id="tab-2" class="tab-content">
  Please call us to discuss ownership changes on 01392 333 333
</div>
<div id="tab-3" class="tab-content">
  Please call us to discuss re-grading of this service on 01392 333 333
</div>
<div id="tab-4" class="tab-content">
  Please call us to discuss ceasing of this service on 01392 333 333
</div>

＆＃13;

Answer 2

试试这个......

li.current::after {      
    color: transparent;
    content: "";
    position: absolute;width: 0; 
      height: 0; 
      border-left: 20px solid transparent;
      border-right: 20px solid transparent;
      border-top: 20px solid #f00;
    bottom: -16px;
    left: 0;
    right: 0;
    margin: auto;
    border-width: 15px 15px 0px;
    /* background-position-y: -100px; */
    border-style: solid;
     border-color: #30B3EE transparent;

    background-position-x: -100px;
    width: 0;
}

Answer 3

只需添加边框属性：

li.current::after { 
    color: transparent;
    content: "";
    position: absolute;
    bottom: -12px;
    left: 0;
    right: 0;
    margin: auto;
    border-top : 15px solid #000;
    border-left : 15px solid transparent;
    border-right : 15px solid transparent;
    width: 0;
}

Css为标签创建一个三角形

3 个答案: