CSS--擬似要素による三角形化




   
       
       
       <style type="text/css">
           .tri_top, .tri_right, .tri_bottom, .tri_left{
               width: 150px;
               height: 100px;
               background: #CCCCCC;
               border-radius: 8px;
               margin: 50px;
               position: relative;
           }
           /* */
           .tri_top:before{
               content: "";
               border : 10px solid transparent;
               border-bottom-color: red;
               position: absolute;
               top: -20px;
               left: 65px;
           }
           /* */
           .tri_right:before{
               content: "";
               border : 10px solid transparent;
               border-left-color: yellow;
               position: absolute;
               top: 40px;
               left: 150px;
           }
           /* */
           .tri_bottom:before{
               content: "";
               border : 10px solid transparent;
               border-top-color: blue;
               position: absolute;
               top: 100px;
               left: 70px;
           }
           /* */
           .tri_left:before{
               content: "";
               border : 10px solid transparent;
               border-right-color: green;
               position: absolute;
               top: 40px;
               left: -20px;
           }
       </style>
   
   
       <div class="tri_top"/>         <!-- -->
       <div class="tri_right"/>       <!-- -->
       <div class="tri_bottom"/>      <!-- -->
       <div class="tri_left"/>        <!-- -->
   
</code></pre> 
  <p> </p> 
 </div> 
</div>
                            </div>
                        </div>