利用边框和圆角属性实现各种三角和圆形

正三角

HTML:
  <div class="box1"></div>
  <div class="box2"></div>
  <div class="box3"></div>
  <div class="box4"></div>

CSS:
    * {
      margin: 0;
      padding: 0;
    }

    .box1 {
      margin: 30px;
      width: 0px;
      height: 0px;
      border: 30px solid;
      /* border-color: red yellow blue pink;  需求：只留黄色，只需要把其他的颜色为透明就好 */
      border-color: yellow transparent transparent transparent;
    }

    .box2 {
      margin: 30px;
      width: 0px;
      height: 0px;
      border: 30px solid;
      /* border-color: red yellow blue pink;  需求：只留黄色，只需要把其他的颜色为透明就好 */
      border-color: transparent yellow transparent transparent;
    }

    .box3 {
      margin: 30px;
      width: 0px;
      height: 0px;
      border: 30px solid;
      /* border-color: red yellow blue pink;  需求：只留黄色，只需要把其他的颜色为透明就好 */
      border-color: transparent transparent yellow transparent;
    }

    .box4 {
      margin: 30px;
      width: 0px;
      height: 0px;
      border: 30px solid;
      /* border-color: red yellow blue pink;  需求：只留黄色，只需要把其他的颜色为透明就好 */
      border-color: transparent transparent transparent yellow;
    }

倾斜的三角

HTML
  <div class="box1"></div>
  <div class="box2"></div>
  <div class="box3"></div>
  
CSS

    .box1 {
      margin: 30px;
      width: 0px;
      height: 0px;
      border: 30px solid;
      border-bottom: none;
      /* 需求：得到一个直角位于右下的三角形 左下角的45度的三角形---只需要设置上左右，上左透明 */
      border-color: transparent yellow transparent transparent;
    }

    .box2 {
      margin: 30px;
      width: 0px;
      height: 0px;
      border: 30px solid;
      border-bottom: none;
      border-right: 40px solid;
      /* 需求：得到一个直角位于右下的三角形 左下角的30度左右的三角形---只需要设置上下左透明  右边大小设置变大*/
      border-color: transparent yellow transparent transparent;
    }

    .box3 {
      margin: 30px;
      width: 0px;
      height: 0px;
      border: 30px solid;
      border-bottom: none;
      border-right: 20px solid;
      /* 需求：得到一个直角位于右下的三角形 左下角的60度左右的三角形---只需要设置上下左透明 右边大小设置变小 */
      border-color: transparent yellow transparent transparent;
    }

    .box1 {
      margin: 30px;
      width: 0px;
      height: 0px;
      border: 30px solid;
      border-bottom: none;
      border-right: 20px solid;
      /* 需求：得到一个直角位于左下 左下角的60度左右的三角形---只需要设置上左右，下透明 右边大小设置大小 */
      border-color: transparent transparent transparent yellow;
    }

    .box2 {
      margin: 30px;
      width: 0px;
      height: 0px;
      border: 30px solid;
      border-bottom: none;
      border-left: 40px solid;
      /* 需求：得到一个直角位于右下的三角形 左下角的30度左右的三角形---只需要设置上下左透明  右边大小设置变大*/
      border-color: transparent transparent transparent yellow;
    }

    .box3 {
      margin: 30px;
      width: 0px;
      height: 0px;
      border: 30px solid;
      border-bottom: none;
      border-right: 20px solid;
      /* 需求：得到一个直角位于右下的三角形 左下角的60度左右的三角形---只需要设置上下左透明 右边大小设置变小 */
      border-color: transparent transparent transparent yellow;
    }

    .box1 {
      margin: 30px;
      width: 0px;
      height: 0px;
      border: 30px solid;
      border-top: none;
      border-right: 20px solid;
      /* 需求：得到一个直角位于左上 左下角的60度左右的三角形---只需要设置上左右，下透明 右边大小设置大小 */
      border-color: transparent transparent transparent yellow;
    }

    .box2 {
      margin: 30px;
      width: 0px;
      height: 0px;
      border: 30px solid;
      border-top: none;
      /* 若是需要调整角度的haul，则修改以下这个属性即可  可以得到不同焦点的三角形*/
      border-right: 20px solid;
      /* 需求：得到一个直角位于右上 去掉上边框 并且设置右边颜色 其余为透明 */
      border-color: transparent yellow transparent transparent;
    }

圆形

  <ul>
    <li class="circle1">上边圆</li>
    <li class="circle2">左边圆</li>
    <li class="circle3">下边圆</li>
    <li class="circle4">左边圆</li>
    <li class="circle5">全圆</li>
  </ul>

    * {
      margin: 0;
      padding: 0;
    }

    ul li {
      list-style: none;
      float: left;
      margin-left: 20px;
      margin-top: 50px;
      text-align: center;
    }

    li {
      background: red;
    }

    .circle1 {
      width: 100px;
      height: 50px;
      border-radius: 50px 50px 0 0;
      line-height: 50px;
    }

    .circle3 {
      width: 100px;
      height: 50px;
      border-radius: 0 0 50px 50px;
      line-height: 50px;
    }

    .circle2 {
      width: 50px;
      height: 100px;
      border-radius: 0 50px 50px 0;
      line-height: 100px;
    }

    .circle4 {
      width: 50px;
      height: 100px;
      border-radius: 50px 0 0 50px;
      line-height: 100px;
    }

    .circle5 {
      width: 100px;
      height: 100px;
      border-radius: 50px;
      line-height: 100px;
    }