CSS创建的各种多边形形状图片特效代码

使用方法

.cd__main{
  background: #208C8C !important;
  display: block !important;
}

/*
 * ==== Losange
 */
.losange, .losange div {
  margin: 0 auto;
  transform-origin: 50% 50%;
  overflow: hidden;
  width: 250px;
  height: 250px;
}
.losange {
  transform: rotate(45deg) translateY(10px);
}
.losange .los1 {
  width: 355px;
  height: 355px;
  transform: rotate(-45deg) translateY(-74px);
}
.losange .los1 img {
  width: 100%;
  height: auto;
}



/*
 * ==== diamond 
 */

.diamond, .dia {
  margin: 0 auto;
  transform-origin: 50% 50%;
  overflow: hidden;
  width: 300px;
  height: 300px;
}
.diamond {
  transform: rotate(45deg) translateY(-25px) translateX(-25px);
}
.diamond .dia {
  width: 380px;
  height: 380px;
  transform: rotate(-45deg);
}
.diamond img {
  width: 100%;
  height: auto;
}


/* 
 * ==== octogone
 */
.octo, .octo div {
  margin: 0 auto;
  transform-origin: 50% 50%;
  overflow: hidden;
  width: 300px;
  height: 300px;
}
.octo, .octo div {
  width: 270px;
  height: 270px;
}
.octo {
  transform: rotate(45deg);
}
.octo1 {
  transform: rotate(-45deg);
}



/*
 * ==== hexagon
 */
.hexa, .hexa div {
  margin: 0 auto;
  transform-origin: 50% 50%;
  overflow: hidden;
  width: 300px;
  height: 300px;
}
.hexa {
  width: 325px;
  height: 230px;
}
.hexa div {
  width: 100%;
  height: 100%;
}
.hexa {
  transform: rotate(120deg);
}
.hex1 {
  transform: rotate(-60deg);
}
.hex2 {
  transform: rotate(-60deg);
}

/*
 * ==== dodecagon
 */
.dodeca, .dodeca div {
  margin: 0 auto;
  transform-origin: 50% 50%;
  overflow: hidden;
  width: 300px;
  height: 300px;
}
.dodeca {
  transform: rotate(120deg);
}
.dode1 {
  transform: rotate(-60deg);
}
.dode2 {
  transform: rotate(-60deg);
}

/* irregular dodecagon */
.irr, .irr div {
  width: 320px;
}















/* dev mode */
.part.devmode div {
  box-shadow: 0 0 4px;
}
/* presentation */
body {
  padding: 0; margin: 0;
  font-family: "Open Sans Condensed", "Open Sans", "Droid Sans", sans-serif;
  font-size: 1.2em;
  line-height: 1.7;
  background: #208C8C;
  color: #DFF7E5;
}
h1, h2 {
  font-weight: normal;
  text-align: center;
}
h1 {
  margin-bottom: 0;
}
h2 {
  margin: 0 0 1.7em;
}
p {
  max-width: 600px;
  margin: 3em auto;
  text-align: center;
}
a {
  color: #FFF;
}
.by {
  margin-top: 0;
  opacity: .5;
  transition: opacity .4s;
}
.by:hover,
.by a:focus {
  opacity: 1;
}
.by, .photos {
  font-size: .8em;
}
.part {
  padding: 50px 20px 85px;
  background: #205B73;
  color: #AFE4FC;
}
.part:nth-of-type(2n) {
  background: #F2E6A7;
  color: #CDAE51
}
.dev {
  display: block;
  margin: 1.5em auto;
  max-width: 200px;
  padding: 15px 25px;
  border: 2px solid #FFF;
  background: transparent;
  color: #FFF;
  font-size: .9em;
  font-weight: bold;
  cursor: pointer;
  transition: all .4s
}
.dev:hover,
.dev:focus {
  background: rgba(0,0,0,.2);
}
.hexa img {
  position: relative;
  top: -25px;
  left: 20px;
}
.octo div img {
  position :relative;
  left:-5px; top: -5px;
}
.diamond img {
  position: relative;
  width: 105%; left: -7px; top: -5px;
}