CSS简单绘制特殊图形和布局

2017-12-24 本文已影响0人 mkv_me

三角形

Triangle1

.triangle1 {
    width: 0px;
    height: 0px;
    border: 30px solid;
    border-left-color: transparent;
    border-bottom-color: brown;
    border-top-color: transparent;
    border-right-color: transparent;
}

圆形

Triangle2

.triangle2{
    width: 0px;
    height: 0;
    border: 30px solid;
    border-left-color: blue;
    border-bottom-color: brown;
    border-right-color: red;
    border-bottom: 0;
    margin-top: 20px;
    border-left: 0;
    border-top-color: transparent;
}

梯形

trapezoid

.trapezoid{
    width: 32px;
    height: 0px;
    border: 20px solid;
    border-left-color: transparent;
    border-bottom-color: red;
    border-top-color: transparent;
    border-right-color: transparent;
}