我的图片重叠了,但我不知道如何创建指向大图片的小箭头
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进行移动响应,并且我还想知道屏幕变小时,将黄色框移到图片下方会是一个更好的主意吗?还是只是缩小一切?我很确定我会使用媒体查询,但还没有决定要做什么
再次感谢
您可以尝试使用带有: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] 删除。
我来说两句