CSS基本形状之弧形箭头示例

<!DOCTYPE HTML>
<html>
<head>
  <meta charset="utf-8">
  <title>三十课 - CSS基本形状之弧形箭头示例</title>
  <style>
   .curvedarrow {                        
        position: relative;               
        width: 0;                         
        height: 0;                        
        font-size: 8px;                   
        border-top: 9em solid transparent;
        border-right: 9em solid olive;    
        transform: rotate(10deg);         
        margin: 4em 0 4em 5.5em;          
    }                                     
                                          
    .curvedarrow:after {                  
        content: "";                      
        position: absolute;               
        border: 0 solid transparent;      
        border-top: 3em solid olive;      
        border-radius: 20em 0 0 0;        
        top: -11.5em;                     
        left: -8.75em;                    
        width: 12em;                      
        height: 12em;                     
        transform: rotate(45deg);         
    }  
  </style>
</head>
<body>
    <div class="curvedarrow" style="margin-left: 100px;"></div>
</body>
</html>