css绘制三角形

  • A+
所属分类:CSS3

正三角

上方边框隐藏,左右两侧的边框透明色

css绘制三角形

  1. .just_triangle {
  2.     width: 0;
  3.     height: 0;
  4.     backgroundtransparent;
  5.     border50px solid;
  6.     border-toptransparent;
  7.     border-left-colortransparent;
  8.     border-right-colortransparent;
  9.     border-bottom-color#c40000;
  10. }

倒三角

下方边框隐藏,左右两侧的边框透明色

css绘制三角形

  1. .down_triangle {
  2.     width: 0;
  3.     height: 0;
  4.     backgroundtransparent;
  5.     border50px solid;
  6.     border-bottomtransparent;
  7.     border-left-colortransparent;
  8.     border-right-colortransparent;
  9.     border-top-color#c40000;
  10. }

左三角

右侧边框隐藏,左右两侧的边框透明色

css绘制三角形

  1. .left_triangle {
  2.     width: 0;
  3.     height: 0;
  4.     backgroundtransparent;
  5.     border50px solid;
  6.     border-righttransparent;
  7.     border-top-colortransparent;
  8.     border-bottom-colortransparent;
  9.     border-left-color#c40000;
  10. }

右三角

左侧边框隐藏,左右两侧的边框透明色

css绘制三角形

  1. .right_triangle {  
  2.     width: 0;  
  3.     height: 0;  
  4.     backgroundtransparent;  
  5.     border50px solid;  
  6.     border-lefttransparent;  
  7.     border-top-colortransparent;  
  8.     border-bottom-colortransparent;  
  9.     border-right-color#c40000;  
  10. }  

 

左右对立三角

border默认颜色为黑色,所以当上下颜色透明后,右侧的三角形呈现黑色

css绘制三角形

  1. .lr_triangle {  
  2.     width0px;  
  3.     height0px;  
  4.     backgroundtransparent;  
  5.     border50px solid;  
  6.     border-bottom-colortransparent;  
  7.     border-left-color#c40000;  
  8.     border-top-colortransparent;  
  9. }  

上下对立三角

border默认颜色为黑色,所以当左右颜色透明后,下侧的三角形呈现黑色

css绘制三角形

  1. .tb_triangle {  
  2.     width0px;  
  3.     height0px;  
  4.     backgroundtransparent;  
  5.     border50px solid;  
  6.     border-left-colortransparent;  
  7.     border-top-color#c40000;  
  8.     border-right-colortransparent;  
  9. }  
李金龙

发表评论

:?: :razz: :sad: :evil: :!: :smile: :oops: :grin: :eek: :shock: :???: :cool: :lol: :mad: :twisted: :roll: :wink: :idea: :arrow: :neutral: :cry: :mrgreen: