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

• 三角形

  
  
  

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

• CSS3D加速
  transform: translate3d(0,0,0);
  backface-visibility:hidden;
  perspective: 1000;

布局

普通三列布局

html

css

圣杯布局(让middle提前渲染)

html

css

双飞翼布局

html

CSS