html 三角形切斜,CSS3 类天猫斜三角形商品分类标签

CSS

语言：

CSSSCSS

确定

@import url(http://fonts.googleapis.com/css?family=Open+Sans:600,300,400);

* {

-moz-box-sizing: border-box;

-webkit-box-sizing: border-box;

box-sizing: border-box;

}

html,

body {

width: 100%;

height: 100%;

background: #efefef;

font-family: Open Sans;

color: #263238;

padding: 0;

margin: 0;

}

.product {

margin: 60px auto;

padding: 40px;

position: relative;

width: 420px;

background: white;

z-index: 0;

-moz-box-shadow: 0px 5px 40px rgba(0, 0, 0, 0.2);

-webkit-box-shadow: 0px 5px 40px rgba(0, 0, 0, 0.2);

box-shadow: 0px 5px 40px rgba(0, 0, 0, 0.2);

-moz-border-radius: 3px;

-webkit-border-radius: 3px;

border-radius: 3px;

}

img {

margin-bottom: 20px;

height: 200px;

width: 200px;

z-index: -2;

-moz-border-radius: 3px;

-webkit-border-radius: 3px;

border-radius: 3px;

}

hr {

border: none;

border-bottom: 1px solid #e3ebee;

}

.desciption h2 small {

color: #90a4ae;

font-weight: 300;

font-size: 70%;

}

.desciption p {

font-size: 14px;

margin-bottom: 0;

}

.market-type {

display: block;

padding: 5px 0 0 10px;

z-index: 10;

position: absolute;

color: #fff;

width: 100px;

height: 100px;

font-size: 14px;

background: url(/uploads/160101/tmall-tags.png) no-repeat;

}

.market-type a {

color: #fff;

text-decoration: none;

}

.fa {

display: inline-block;

font: normal normal normal 14px/1 FontAwesome;

font-size: inherit;

text-rendering: auto;

-webkit-font-smoothing: antialiased;

-moz-osx-font-smoothing: grayscale;

}