好吧,我不知道如何正确解释它.在这里,查看我想要制作的截图.我的设计师给了我这个.如果我找不到解决方案,我将使用图像而不使用代码.用
CSS3可以做到这一点吗？
看到那个盒子里面的三角形？我想做这个.谢谢！
解决方法
创造性地使用边框来实现这种效果,在下面的示例中没有图像受到损害,您甚至可以在元素本身上设置箭头的位置 – 如果您可以为您的设计进行硬编码,则会变得更加直截了当.
HTML
<div class="top">
<span class="arrow" style="left:40%"></span>
</div>
CSS
.top {
background:url(http://blog.positscience.com/wp-content/uploads/2013/08/ice-cream3.jpg);
background-size:cover;
width:300px;
height:300px;
border:1px solid #888;
position:relative;
overflow:hidden;
}
.arrow {
border:30px solid #aaa;
border-bottom:none;
border-color:transparent #aaa transparent #aaa;
position:absolute;
left:0;
bottom:0;
}
.arrow:before,.arrow:after {
content:'';
position:absolute;
width:5000px;
bottom:0;
height:30px;
background:#aaa;
}
.arrow:before {
right:30px;
}
.arrow:after {
left:30px;
}
