html图片不要角,CSS3 带小折角的图片

CSS

语言：

CSSSCSS

确定

body {

width: 100%;

*zoom: 1;

}

body:before,

body:after {

content: "";

display: table;

}

body:after {

clear: both;

}

body {

background: #f5f5f5;

}

img {

max-width: 100%;

vertical-align: middle;

}

.side {

width: 300px;

margin: 2em auto;

}

.profile-callout {

position: relative;

overflow: hidden;

}

.profile-callout img {

z-index: -1;

position: relative;

}

.profile-callout .text {

position: absolute;

top: 55%;

left: 1em;

-webkit-transition: top 200ms ease;

transition: top 200ms ease;

color: #fff;

text-shadow: 1px 1px #000;

}

.profile-callout .text h1 {

margin: 0 0 0.75em;

font-weight: 100;

font-family: monospace;

}

.profile-callout .text span {

display: block;

margin: 0 0 0.25em;

font-weight: 300;

}

.profile-callout .text span.green {

color: #b0c74c;

font-style: italic;

margin: 0;

}

.profile-callout .text span.below-fold {

padding-top: 1.5em;

}

.profile-callout:hover .text {

top: 20%;

}

.profile-callout:hover:before {

border: solid 0px white;

}

.profile-callout:hover .overlay {

background-color: rgba(0, 47, 75, 0.85);

}

.profile-callout:before {

content: "";

position: absolute;

top: 0;

left: 0;

background: #b0c74c;

border: solid 20px;

border-color: #f5f5f5 transparent transparent #f5f5f5;

border-radius: 0;

box-shadow: -2px 2px 1px rgba(0, 0, 0, 0.1);

-webkit-transition: border 200ms ease;

transition: border 200ms ease;

}

.overlay {

display: table;

width: 100%;

background-color: rgba(0, 47, 75, 0.5);

-webkit-transition: background-color 200ms ease;

transition: background-color 200ms ease;

background-position: center top;

height: 100%;

z-index: 2;

}