使用具有不同尺寸线的CSS绘制角度

我用CSS创建了一个角度。它基本上是2个

div

元素的

边框底部。为了获得“角度”，我使用了css
transform origin
属性，这里是我的代码：现在灰色和蓝色线条的长度相同，但我希望它们的长度不同，比如蓝色的应该是10px，灰色的应该是30px。我该怎么做

代码：

.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);
}