html 三角形图片,CSS3 图片下方三角形箭头

CSS

语言：

CSSSCSS

确定

body {

color: #999;

padding: 50px;

background: #eee;

}

p {

font-size: 24px;

line-height: 1.5em;

font-family: serif;

}

.box {

margin: 0 auto;

max-width: 600px;

background: #fff;

border: 1px solid #ccc;

}

.content {

padding: 32px 42px;

border-radius: 0 0 3px 3px;

}

.content h1 {

color: #444;

margin-top: 0;

}

.image {

width: 100%;

overflow: hidden;

padding: 0 0 50%;

position: relative;

-webkit-transition: padding 0.5s ease-out;

transition: padding 0.5s ease-out;

background-image: url("http://www.fillmurray.com/800/600");

background-size: cover;

}

.image:hover {

padding-bottom: 60%;

}

.image::before {

left: 0;

bottom: 0;

content: '';

width: 32px;

position: absolute;

border-bottom: 12px solid #fff;

border-right: 12px solid transparent;

}

.image::after {

bottom: 0;

left: 44px;

content: '';

width: 100%;

position: absolute;

border-bottom: 12px solid #fff;

border-left: 12px solid transparent;

}