CSS 箭头定位

Question

我有两种不同类型的div，每个都应该有一个箭头，指向它旁边的图像。但是，它看起来像这样：

http://jsfiddle.net/990h3wot/1/

如何使箭头移动到divs 的一侧，而不是像现在这样坐在它们里面？

Answer 1

相对定位.home-link-left和.home-link-right并设置:before和:after的left和right属性：伪元素。

Fiddle

.home-link-left,
.home-link-right {
  vertical-align: middle;
  margin: auto;
  width: 35vmin;
  height: 12vmin;
  border: 0.7vmin outset #232323;
  background-color: #606060;
  background: -webkit-radial-gradient(#707070, #505050);
  background: -moz-radial-gradient(#707070, #505050);
  background: -o-radial-gradient(#707070, #505050);
  background: radial-gradient(#707070, #505050);
  color: white;
  position: relative;
}
.home-link-left {
  border-radius: 20px 0px 0px 20px;
  left: 0px;
  border-right: 0px solid transparent;
}
.home-link-right {
  border-radius: 0px 20px 20px 0px;
  right: 0px;
  border-left: 0px solid transparent;
}
.home-link-left:before,
.home-link-right:after {
  content: '';
  position: absolute;
  width: 0px;
  height: 0px;
  border-bottom: 6vmin solid transparent;
  border-top: 6vmin solid transparent;
  vertical-align: middle;
  display: block;
}
.home-link-container {
  width: 45vmin;
  height: 13vmin;
  margin: auto;
  vertical-align: middle;
}
.home-link-left:before {
  border-left: 4vmin solid red;
  right: -4vmin;
}
.home-link-right:after {
  border-right: 4vmin solid red;
  left: -4vmin;
}
.home-link-image {
  border: 0.7vmin outset #333333;
  vertical-align: middle;
  margin-top: -10%;
  margin: auto;
  width: 35vmin;
  height: 25vmin;
  border-radius: 20px;
}

<table id="home-table">
  <tr>
    <td>
      <div class="home-link-container">
        <div class="home-link-left">
          <a href="#"></a>
        </div>
      </div>
    </td>
    <td>
      <div class="home-link-image"></div>
    </td>
  </tr>
  <tr>
    <td>
      <div class="home-link-image"></div>
    </td>
    <td>
      <div class="home-link-container">
        <div class="home-link-right">
          <a href="#"></a>
        </div>
      </div>
    </td>
  </tr>
  <tr>
    <td>
      <div class="home-link-container">
        <div class="home-link-left">
          <a href="#"></a>
        </div>
      </div>
    </td>
    <td>
      <div class="home-link-image"></div>
    </td>
  </tr>
  <tr>
    <td>
      <div class="home-link-image"></div>
    </td>
    <td>
      <div class="home-link-container">
        <div class="home-link-right">
          <a href="#"></a>
        </div>
      </div>
    </td>
  </tr>
</table>

Answer 2

一定要给箭头父母，.home-link-left .home-link-right，position:relative：

.home-link-left, .home-link-right{
vertical-align:middle;
margin:auto;
width:35vmin;
height:12vmin;
border:0.7vmin outset #232323;
background-color:#606060;
background: -webkit-radial-gradient(#707070, #505050);
background: -moz-radial-gradient(#707070, #505050);
background: -o-radial-gradient(#707070, #505050);
background: radial-gradient(#707070, #505050);
color:white;
position:relative;/*<- Position:relative;*/
}

并给伪元素箭头一个左或右的位置：

.home-link-left:before{
border-left:4vmin solid red;
right:-4vmax;
}
.home-link-right:after{
border-right:4vmin solid red;
   left:-4vmax; 
}

JSFiddle