CSS画心形、蛋形、菱形、八卦、三角、圆形、对话框、平行四边形

各图形的html代码均为 <div class=""></div>，替换class名称即可

圆形

  <div class="circle"></div>

.circle {
  width: 100px;
  height: 100px;
  border: 1px solid #ccc;
  border-radius: 50%;
  background: coral;
}

蛋形

<div class="egg"> </div>

.egg {
  width: 126px;
  height: 180px;
  background-color: #eee;
  box-shadow: 0px 2px 5px #ccc;
  display: block;
  border-radius: 50% 50% 50% 50%/60% 60% 40% 40%;
}

心形

<div class="heart"></div>

.heart {
  width: 100px;
  height: 90px;
  position: relative;
}
.heart:before,
.heart:after {
  width: 50px;
  height: 80px;
  left: 50px;
  top: 0;
  background-color: coral;
  position: absolute;
  content: "";
  border-radius: 50px 50px 0 0;
  transform: rotate(-45deg);
  transform-origin: 0 100%;
}
.heart:after {
  left: 0;
  transform: rotate(45deg);
  transform-origin: 100% 100%;
}

菱形

.diamod {
  width: 150px;
  height: 150px;
  background: #6a6;
  transform: rotate(45deg);
  margin: 50px;
}

三角形

.triangle1 {
  width: 0;
  height: 0;
  border-top: 50px solid #000;
  border-right: 50px solid transparent;
  border-bottom: 0px solid #f00;
  border-left: 50px solid transparent;
}
.triangle2 {
  width: 0;
  height: 0;
  border-top: 50px solid transparent;
  border-right: 50px solid skyblue;
  border-bottom: 50px solid transparent;
  border-left: 0px solid transparent;
}
.triangle3 {
  width: 0;
  height: 0;
  border-top: 0px solid transparent;
  border-right: 50px solid transparent;
  border-bottom: 50px solid #f00;
  border-left: 50px solid transparent;
}
.triangle4 {
  width: 0;
  height: 0;
  border-top: 50px solid transparent;
  border-right: 0px solid skyblue;
  border-bottom: 50px solid transparent;
  border-left: 50px solid #ccc;
}

对话框

.dialog {
  width: 250px;
  height: 25px;
  background: #6a6;
  line-height: 25px;
  color: #cccccc;
  padding: 10px;
  border-radius: 6px;
  position: relative;
}
.dialog::before {
  content: "";
  width: 0;
  height: 0;
  border-top: 10px solid transparent;
  border-right: 10px solid #6a6;
  border-bottom: 10px solid transparent;
  border-left: 0px solid #fff;
  position: absolute;
  left: -10px;
  top: 14px;
}

五角星

.star {
  width: 0;
  height: 0;
  margin: 50px 0;
  position: relative;
  display: block;
  border-left: 100px solid transparent;
  border-right: 100px solid transparent;
  border-bottom: 70px solid red;
  transform: rotate(-35deg);
}
.star::before {
  width: 0;
  height: 0;
  border-left: 30px solid transparent;
  border-right: 30px solid transparent;
  border-bottom: 80px solid red;
  position: absolute;
  top: -45px;
  left: -65px;
  display: block;
  content: "";
  transform: rotate(-35deg);
}
.star::after {
  width: 0;
  height: 0;
  display: block;
  position: absolute;
  color: red;
  top: 3px;
  left: -105px;
  border-left: 100px solid transparent;
  border-right: 100px solid transparent;
  border-bottom: 70px solid red;
  content: "";
  transform: rotate(-70deg);
}

八卦

<div class="yy"></div>

.yy::before {
  content: "";
  width: 12px;
  height: 12px;
  top: 50%;
  left: 0;
  position: absolute;
  background-color: #fff;
  border: 18px solid #000;
  border-radius: 100%;
}
.yy::after {
  content: "";
  width: 12px;
  height: 12px;
  top: 50%;
  left: 50%;
  position: absolute;
  background-color: #000;
  border: 18px solid #fff;
  border-radius: 100%;
}

平行四边形

.parallel {
  width: 150px;
  height: 100px;
  background: #6a6;
  transform: skew(45deg, 10deg);
  margin: 50px;
}

利用CSS3中的伪类元素、transform、border-radius等新特性可以写出非常多以前只能用图片代替的图案，虽然代码复杂度会增加，但效果更加清晰，给用户体验会更好。

最后祝大家圣诞快乐，学习愉快！