跳到主要内容

方案-图形生成

正方形​

正方形的绘制很简单, 只要直接指定长和宽为一致就可以了. 但是如何在移动端实现宽度自适应的正方形呢. 这里有几种纯CSS的方案.

alt

  1. 使用vw
.square {
    width: 50%;
    height: 50vw;
    background: #ccc;
}

这里的正方形的尺寸是视口的50%.

  1. 在未知长宽的组件中实现一个正方形
.square {
    width: 50%;
    padding-bottom: 50%; /* padding百分比相对父元素宽度计算 */
}

椭圆形​

alt

.oval {
    width: 200px;
    height: 100px;
    background: red;
    -moz-border-radius: 100px / 50px;
    -webkit-border-radius: 100px / 50px;
    border-radius: 100px / 50px; /* 可以使用百分比值(大于50%)，但是低版本的Android不支持 */
}

这个原理是因为border-radius是可以指定圆弧的水平半径和垂直半径的.

三角形​

alt

.triangle-up {
    width: 0;
    height: 0;
    border-left: 50px solid transparent;
    border-right: 50px solid transparent;
    border-bottom: 100px solid red;
}

这里是绘制了一个向上的三角形, 我们可以通过调整border的不同位置, 改变三角形的方向, 另外一种三角的绘制方式如下, 原理是一样的:

alt

.triangle-topleft {
    width: 0;
    height: 0;
    border-top: 100px solid red;
    border-right: 100px solid transparent;
}

同样的, 我们可以通过调整不同位置实现4个方向的正方形. 实际上这个三角形是由两个上面那种三角形拼接起来的.

转弯箭头​

alt

.square {
    position: relative;
    width: 0;
    height: 0;
    border-top: 9px solid transparent;
    border-right: 9px solid red;
}

.square::after {
    content: "";
    position: absolute;
    border: 0 solid transparent;
    border-top: 3px solid red;
    border-radius: 20px 0 0 0;
    top: -12px;
    left: -9px;
    width: 12px;
    height: 12px;
    transform: rotate(45deg);
}

这里利用了border-radius和boder的组合实现了转弯曲线的实现

梯形​

alt

.trapezoid {
    border-bottom: 100px solid red;
    border-left: 50px solid transparent;
    border-right: 50px solid transparent;
    height: 0;
    width: 100px;
}

平行四边形​

alt

.parallelogram {
    width: 150px;
    height: 100px;
    -webkit-transform: skew(20deg);
       -moz-transform: skew(20deg);
         -o-transform: skew(20deg);
    background: red;
}

这里简单的使用transform中的skew去实现

其他​