在前端日常工作中，會有一些需要用純css實現的小標誌，如小箭頭或三角形，下面簡單地實現一下

1. 製作小箭頭

   .arrow{
       width: 20px;
       height: 20px;
       margin-top: 50px;
       margin-left: 50px;
       border-top: 1px solid #000;
       border-left: 1px solid #000;
       transform: rotate(45deg);/*旋轉角度*/
   }
   <div class="arrow"></div>

    

2. 製作三角形

   .triangle{
       width: 0;
       height: 0;
       border-width: 100px;
       border-style: solid;
       border-color: red transparent transparent transparent;
       transform:rotate(45deg);
   }
   <div class="triangle"></div>

    

3.  讓多個元素在一行顯示

   (1)display:inline把元素轉化為行內元素，但是寬高屬性不起作用
   (2)display：inline-block可以讓元素在一行顯示，但是他會受空格、換行鍵的影響，會有預設間距
   =>解決辦法：
   1.去掉空格和換行鍵的影響 讓標籤全都在一行（這種方法不推薦，閱讀性不好）
   2.給加了display:inline-block屬性的元素的父元素加一個屬性font-size:0

   display:inline-block在ie6 7下不相容的解決辦法？
   dispaly:inline;//css hack ie瀏覽器可以識別
   zoom:1;//觸發css hack的layout

   (3)利用浮動floa:left/right,但是需要清浮動