Question

提供绘制基本形状的功能。

依赖于：

• variables
• util

• .triangle()

  绘制等腰直角三角形。

  • .triangle(@direction, @size, @color, @origin)

    @direction

    三角形的直角指向的方向。可用值有垂直方向上的 top / bottom 与水平方向上的 right / left，或用两个方向上的组合表达斜 45° 角方向，如 top left。

    @size

    直角边长度。

    @color

    三角形背景色。

    @origin

    直角顶点所处的位置，详见图。可取值为 corner / side。可选，默认值 corner。

    direction 和 origin 的不同组合效果见下图：

    

    .comment:after {
    .triangle(top left, #ccc, 10px, corner);
    }

    .comment:after {
    position: absolute;
    width: 0;
    height: 0;
    border: #666666 solid 10px;
    border-bottom-color: transparent;
    border-right-color: transparent;
    }
    

  Demo 见此。

• .circle()

  绘制圆形。

  • .circle(@size)

    @size

    所绘圆形的直径。支持绝对长度或百分比。

    .ball {
    .circle(30%);
    }

    .ball {
    width: 30%;
    padding-top: 30%;
    -webkit-border-radius: 50%;
    -moz-border-radius: 50%;
    border-radius: 50%;
    }
    

  • .circle(@size, @bg)

    @size

    所绘圆形的直径。支持绝对长度或百分比。

    @bg

    圆形背景，可以为颜色或其他合法的 background 属性值。

    .ball {
    .circle(30%, url(img/texture.png) lightgreen no-repeat center center);
    }

    .ball {
    width: 30%;
    padding-top: 30%;
    -webkit-border-radius: 50%;
    -moz-border-radius: 50%;
    border-radius: 50%;
    background: url(img/texture.png) lightgreen no-repeat center center;
    }