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;

}