CSS 样式画三角形

小陌很忙

分类: HTML & CSS 2011 22

下面是一些三角形样式,部分我在仿站练习时,用到了的图案,加了点颜色美化,记录一下…

各种三角形的效果图和代码记录

三角形,倒三角形,左三角形,右三角形

上三角

效果图:





代码样式:

#triangle{
    width:0;
    height:0;
    border-left:50px solid transparent;
    border-right:50px solid transparent;
    border-bottom:100px solid #f44336;
}

右三角

效果图:





代码样式:

#triangle{
    width:0;
    height:0;
    border-top:50px solid transparent;
    border-bottom:50px solid transparent;
    border-left:100px solid #2196f3;
}

下三角

效果图:





代码样式:

#triangle{
    width:0;
    height:0;
    border-left:50px solid transparent;
    border-right:50px solid transparent;
    border-top:100px solid #e91e63;
}

左三角

效果图:





代码样式:

#triangle{
    width:0;
    height:0;
    border-top:50px solid transparent;
    border-bottom:50px solid transparent;
    border-right:100px solid #9c27b0;
}

左上直角三角形

效果图:





代码样式:

#triangle{
   width: 0px;  
   height: 0px;  
   margin: 10px 10px;  
   float: left;  
   border-right: 100px solid transparent;
   border-top: 100px solid #ff5722;  
}

右上直角三角形

效果图:





代码样式:

#triangle{
  width: 0px;  
  height: 0px;  
  margin: 10px 10px;  
  float: left;  
  border-left: 100px solid transparent;
  border-top: 100px solid #ffca28;  
}

右下直角三角形

效果图:





代码样式:

#triangle{
  width: 0px;  
  height: 0px;  
  margin: 10px 10px;  
  float: left;  
  border-right: 100px solid transparent; 
  border-bottom: 100px solid #4caf50; 
}

左下直角三角形

效果图:





代码样式:

#triangle{
  width: 0px;  
  height: 0px;  
  margin: 10px 10px;  
  float: left;  
  border-left: 100px solid transparent;  
  border-bottom: 100px solid #009688;  
}
  • 7人 Love
  • 1人 Haha
  • 0人 Wow
  • 0人 Sad
  • 0人 Angry
css、triangle

作者简介:小陌很忙

学无止境,生命不息,折腾不止!

共 22 条评论关于 “CSS 样式画三角形”

Loading...