博客园  :: 首页  :: 新随笔  :: 联系 :: 订阅 订阅  :: 管理

纯CSS绘制三角形（各种角度）

Posted on 2017-06-29 17:55  人生梦想起飞  阅读(224)  评论(0)    收藏  举报 
<html>
  <head>
    <meta charset="UTF-8">
    <title>纯CSS绘制三角形（各种角度）</title>
    <style type="text/css">
    div{
      margin:10px;
    }
      .triangle-topright {
          width: 0;
          height: 0;
          border-top: 100px solid red;
          border-left: 100px solid transparent; 
      }
      .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-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;
      }

    </style>
  </head>
  <body>
    <div class="triangle-topright"></div>
    <div class="triangle-topleft"></div>
    <div class="triangle-bottomleft"></div>
    <div class="triangle-bottomright"></div>
    <div class="triangle-up"></div>
    <div class="triangle-down"></div>
    <div class="triangle-left"></div>
    <div class="triangle-right"></div>
  </body>
</html>