不用切图，纯CSS画常用的基本图形

椭圆

#oval {
     width: 200px;
     height: 100px;
     background: red;
     -moz-border-radius: 100px / 50px;
     -webkit-border-radius: 100px / 50px;
     border-radius: 100px / 50px;
}

三角型

/*上*/
#triangle-up {
  width: 0;
  height: 0;
  border-left: 50px solid transparent;
  border-right: 50px solid transparent;
  border-bottom: 100px solid red;
}
/*下*/
#triangle-down {
  width: 0;
  height: 0;
  border-left: 50px solid transparent;
  border-right: 50px solid transparent;
  border-top: 100px solid red;
}
/*左*/
#triangle-left {
  width: 0;
  height: 0;
  border-top: 50px solid transparent;
  border-right: 100px solid red;
  border-bottom: 50px solid transparent;
}
/*右*/

#triangle-right {
  width: 0;
  height: 0;
  border-top: 50px solid transparent;
  border-left: 100px solid red;
  border-bottom: 50px solid transparent;
}

/* 左上三角 */
#triangle-topleft {
    width: 0;
    height: 0;
    border-top: 100px solid red;
    border-right: 100px solid transparent;          
 }

/* 右上三角 */
 #triangle-topright {
    width: 0;
    height: 0;
    border-top: 100px solid red;
    border-left: 100px solid transparent;
}

/* 左下三角 */
#triangle-bottomleft {
    width: 0;
    height: 0;
    border-bottom: 100px solid red;
    border-right: 100px solid transparent;  
}

/* 右下三角 */
#triangle-bottomright {
    width: 0;
    height: 0;
    border-bottom: 100px solid red;
    border-left: 100px solid transparent;
}

五角星

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

爱心

#heart {
    position: relative;
    width: 100px;
    height: 90px;
}
#heart:before,
#heart:after {
    position: absolute;
    content: "";
    left: 50px;
    top: 0;
    width: 50px;
    height: 80px;
    background: red;
    -moz-border-radius: 50px 50px 0 0;
    border-radius: 50px 50px 0 0;
    -webkit-transform: rotate(-45deg);
       -moz-transform: rotate(-45deg);
        -ms-transform: rotate(-45deg);
         -o-transform: rotate(-45deg);
            transform: rotate(-45deg);
    -webkit-transform-origin: 0 100%;
       -moz-transform-origin: 0 100%;
        -ms-transform-origin: 0 100%;
         -o-transform-origin: 0 100%;
            transform-origin: 0 100%;
}
#heart:after {
    left: 0;
    -webkit-transform: rotate(45deg);
       -moz-transform: rotate(45deg);
        -ms-transform: rotate(45deg);
         -o-transform: rotate(45deg);
            transform: rotate(45deg);
    -webkit-transform-origin: 100% 100%;
       -moz-transform-origin: 100% 100%;
        -ms-transform-origin: 100% 100%;
         -o-transform-origin: 100% 100%;
            transform-origin :100% 100%;
}

等腰三角形

仅设定 border-color 上，一个方向的颜色，border-width 上、下；左、右，各为一群组，相同群组须设定为相同尺寸。

.triangle4 {
    border-color: #FF0000 transparent transparent transparent;
    border-style: solid solid solid solid; 

    border-width: 45px 10px 45px 10px; 

    height: 0px; 
    width: 0px; 
}

<div class="triangle4"></div>

对话框（下尖角）

.dialog-bottom {
    margin-bottom: 40px;
    width: 90px;
    height: 62px;
    background: #888888;
    position: relative;
}
.dialog-bottom:after {
    border-color: #888888 #888888 transparent transparent;
    border-style: solid solid solid solid;
    border-width: 15px 10px 15px 10px;
    bottom: -29px;
    content: "";
    height: 0px;
    left: 30px;
    position: absolute;
    width: 0px;
}

<div class="dialog-bottom"></div>

对话框（�左尖角）

.dialog-left {
    background: #888888;
    margin: 0 40px;
    height: 90px;
    position: relative;
    width: 50px;
}
.dialog-left:before {
    border-color: transparent #888888 #888888 transparent; 
    border-style: solid; 
    border-width: 20px;

    content: '';

    height: 0px;
    left: -40px;

    position: absolute;
    top: 35px;
    width: 0px;
}
.dialog-left:after {
    border-color: transparent #fff #fff transparent; 
    border-style: solid solid solid solid; 
    border-width: 10px 20px;

    content: '';

    height: 0px;
    left: -40px; 

    position: absolute;

    top: 55px;
    width: 0px;
}

<div class="dialog-left"></div>

对话框，边框形（下三角）

.dialog-border-bottom {
    border: 5px solid #888888;
    height: 65px;
    position: relative;
    width: 80px;
}
.dialog-border-bottom:before {
    border-color: #888888 transparent transparent; 
    border-style: solid solid solid; 
    border-width: 20px 20px 20px 20px; 
    bottom: -40px;
    content: '';
    height: 0px;
    left: 20px; 
    position: absolute;
    width: 0px;
}
.dialog-border-bottom:after {
    border-color: #fff transparent transparent; 
    border-style: solid solid solid solid; 
    border-width: 20px; 
    bottom: -33px;
    content: '';
    height: 0px;
    left: 20px; 
    position: absolute;
    width: 0px;
}

<div class="dialog-border-bottom"></div>