css三角形的盒子,CSS中的三角形在一个盒子里面
Niels Keuren..
10
创造性地使用边框来实现这种效果,在下面的示例中没有图像受到伤害,您甚至可以在元素本身上设置箭头的位置 - 如果您可以为您的设计进行硬编码,则会变得更加直截了当.
HTML
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;
}
Niels Keuren.. 10 创造性地使用边框来实现这种效果,在下面的示例中没有图像受到伤害,您甚至可以在元素本身上设置箭头的位置 - 如果您可以为您的设计进行硬编码,则会变得更加直截了当. HTML 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; }