JSFiddle

Question

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

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

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

Answer 1

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

Fiddle

＆＃13;

:after

＆＃13;

.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;
}

＆＃13;

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; 
}

CSS箭头定位

2 个答案:

Fiddle

JSFiddle