*{

    margin: 0;
    padding: 0;
}
 #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-right{
      width: 0;
      height: 0;
      border-top: 50px solid transparent;
      border-right: 100px solid red;
      border-bottom: 50px solid transparent;
  }
  #triangle-left{
      width: 0;
      height: 0;
      border-top: 50px solid transparent;
      border-left: 100px solid red;
      border-bottom: 50px solid transparent;
  }
  #circle{
      width: 100px;
      height: 100px;
      background-color:red;
      border-radius: 50%;
      -moz-border-radius: 50%;
      -webkit-border-radius: 50%;
  }

<div id="triangle-up">
</div>
<div id="triangle-down">
</div>
<div id="triangle-left">
</div>
<div id="triangle-right">
</div>
<div id="circle">
</div>

CSS 三角形 圆形