用不同尺寸的CSS繪製角度

Question

我用CSS創建了一個角度。它基本上是div元素的border-bottom。要獲得「角度」，我使用了css transform origin屬性這裏是我的代碼：http://jsfiddle.net/7pvo95tu/現在灰色和藍色線條的長度是相同的，但我希望它們的長度不同，就像藍色的應該是10px，灰色一個是30px。我怎樣才能做到這一點？

代碼：http://jsfiddle.net/7pvo95tu/

Answer 1

.wrapper { 
    background: #fff; 
    float: left; 
    margin: 50px; 
    border: none; 
    border-bottom: 10px solid #999; 

} 
.wrapper div { 
    height: 70px; 
    width: 100px; 
    -webkit-transform: rotate(15deg); 
     -moz-transform: rotate(15deg); 
     -ms-transform: rotate(15deg); 
     -o-transform: rotate(15deg); 
      transform: rotate(15deg); 
    -webkit-transition: .5s; 
     -moz-transition: .5s; 
     -ms-transition: .5s; 
     -o-transition: .5s; 
      transition: .5s; 
} 

.wrapper .transform-origin { 
    background: #fff; 
    border: none; 

    border-bottom: 30px solid blue; 
    -webkit-transform-origin: 100% 100%; 
     -moz-transform-origin: 100% 100%; 
     -ms-transform-origin: 100% 100%; 
     -o-transform-origin: 100% 100%; 
      transform-origin: 100% 100%; 
} 

.rotateAll{ 
//transform: rotate(65deg); 
height: 200px; 
width: 200px; 
//border: 1px solid green; 
} 

#r1{ 
transform: rotate(25deg); 
} 
#r2{ 
transform: rotate(15deg); 
} 
#r3{ 
transform: rotate(5deg); 
} 
#r4{ 
transform: rotate(80deg); 
}