在CSS中为div创建箭头

罗恩·老

嗨,大家好,我正在尝试为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;
}

小提琴链接

创建此功能的任何帮助都将非常有用。另外,我正在使用bootstrap进行移动响应,并且我还想知道屏幕变小时,将黄色框移到图片下方会是一个更好的主意吗?还是只是缩小一切?我很确定我会使用媒体查询,但还没有决定要做什么

再次感谢

陪同Afif

您可以尝试使用带有:before(或:after)元素的旋转正方形

.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);
}
<div class="row">
  <div class="col-md-10">
    <div class="imageDiv"></div>
    <div class="imageDiv bottomDiv"></div>
  </div>
</div>

对于小屏幕,您可以这样做:

.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);
}
<div class="row">
  <div class="col-md-10">
    <div class="imageDiv"></div>
    <div class="imageDiv bottomDiv"></div>
  </div>
</div>

本文收集自互联网,转载请注明来源。

如有侵权,请联系 [email protected] 删除。

编辑于
0

我来说两句

0 条评论
登录 后参与评论

相关文章