使用具有不同大小线的CSS绘制角度

Question

我用CSS创建了一个角度。它基本上是2 border-bottom元素的div。为了获得“角度”，我使用了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);
}