在css

Question

大家好，我正在尝试为div框创建一个小箭头，如下所示：

我让我的照片重叠，但我不知道如何创建指向大图的小箭头

HTML：

    <div class="row">
        <div class="col-md-10">
        <div class="imageDiv"></div>
        <div class="imageDiv bottomDiv"></div>
        </div>
    </div>

CSS：

.imageDiv {
    margin-top: 70px;
    background: #fff;
    display: block;
    width: 555px;
    height: 455px;
    padding: 10px;
    border-radius: 2px 2px 2px 2px;
    -webkit-box-shadow: 0 1px 4px rgba(0, 0, 0, 0.3), 0 0 40px rgba(0, 0, 0, 0.1) inset;
    -moz-box-shadow: 0 1px 4px rgba(0, 0, 0, 0.3), 0 0 40px rgba(0, 0, 0, 0.1) inset;
    box-shadow: 0 1px 4px rgba(0, 0, 0, 0.3), 0 0 40px rgba(0, 0, 0, 0.1) inset;
}
.bottomDiv {
    position: relative;
    bottom: 460px;
    left: 404px;
    width: 295px;
    height: 295px;
    background: black;
}

小提琴link

任何有关创建此功能的帮助都会很棒，而且我使用bootstrap进行移动响应，我也想知道当屏幕变小时，移动图片下方的黄色框会更好吗？或者只是让一切变小？我很确定我会使用媒体查询，但尚未决定该怎么做

再次感谢

Answer 1

试试这个（好吧，根据需要改变颜色，位置和大小）：

.bottomDiv:after {
    content: '';
    display: inline-block;
    position: absolute;
    width: 0;
    height: 0;
    border-style: solid;
    border-width: 10px 20px 10px 0;
    border-color: transparent #007bff transparent transparent;
    left: -20px;
}

http://jsfiddle.net/aw8RD/1855/

Answer 2

您可以尝试使用带：before （或：after）元素的旋转方块，如下所示：

＆＃13;

＆＃13;

.imageDiv {
  margin-top: 70px;
  background: #fff;
  display: block;
  width: 555px;
  height: 455px;
  padding: 10px;
  border-radius: 2px 2px 2px 2px;
  -webkit-box-shadow: 0 1px 4px rgba(0, 0, 0, 0.3), 0 0 40px rgba(0, 0, 0, 0.1) inset;
  -moz-box-shadow: 0 1px 4px rgba(0, 0, 0, 0.3), 0 0 40px rgba(0, 0, 0, 0.1) inset;
  box-shadow: 0 1px 4px rgba(0, 0, 0, 0.3), 0 0 40px rgba(0, 0, 0, 0.1) inset;
}

.bottomDiv {
  position: relative;
  bottom: 460px;
  left: 404px;
  width: 295px;
  height: 295px;
  background: black;
}
.imageDiv.bottomDiv:before {
    content: " ";
    position: absolute;
    background: #000;
    width: 30px;
    height: 30px;
    top: 25px;
    left: -15px;
    transform: rotate(45deg);
}

＆＃13;

<div class="row">
  <div class="col-md-10">
    <div class="imageDiv"></div>
    <div class="imageDiv bottomDiv"></div>
  </div>
</div>

＆＃13;

＆＃13;

＆＃13;

对于小屏幕，你可以这样做：

＆＃13;

＆＃13;

.imageDiv {
  margin-top: 70px;
  background: #fff;
  display: block;
  height: 455px;
  padding: 10px;
  border-radius: 2px 2px 2px 2px;
  -webkit-box-shadow: 0 1px 4px rgba(0, 0, 0, 0.3), 0 0 40px rgba(0, 0, 0, 0.1) inset;
  -moz-box-shadow: 0 1px 4px rgba(0, 0, 0, 0.3), 0 0 40px rgba(0, 0, 0, 0.1) inset;
  box-shadow: 0 1px 4px rgba(0, 0, 0, 0.3), 0 0 40px rgba(0, 0, 0, 0.1) inset;
}

.bottomDiv {
    position: relative;
    bottom: 460px;
    left: 0;
    right: 0;
    height: 150px;
    bottom: 150px;
    background: black;
}
.imageDiv.bottomDiv:before {
   content: " ";
    position: absolute;
    background: #000;
    width: 30px;
    height: 30px;
    top: -15px;
    left: 50%;
    margin-left: -15px;
    transform: rotate(45deg);
}

＆＃13;

<div class="row">
  <div class="col-md-10">
    <div class="imageDiv"></div>
    <div class="imageDiv bottomDiv"></div>
  </div>
</div>

＆＃13;

＆＃13;

＆＃13;

Answer 3

使用CSS创建类似的箭头只是为0宽度/高度的东西添加边框，并使用伪元素:: before将箭头“附加”到所需元素的左侧。

https://css-tricks.com/snippets/css/css-triangle/

<div class="arrow-left"></div> 

.arrow-left::before {
  content: "";
  width: 0; 
  height: 0; 
  border-top: 10px solid transparent;
  border-bottom: 10px solid transparent; 
  border-right:10px solid blue; 
}