北京WEB前端培训
在线咨询 电话咨询 校区地址

课程

环境

就业

试听

企业培训

扫码
关注

首页 / 

行业资讯

北京WEB前端培训 如何用css画出一个三角形

时间: 来源:火星人

在我们制作页面的时候经常需要使用三角形来实现一些视觉效果,而且众所周知好多图形都可以拆分成三角形,所以说会了画三角形就可以画出很多有意思的形状。这大大提高了我们在制作网页时使用代码替代图片的可能性,从而减少了网页体积,达到优化页面的效果。今天就来教大家用css画三角形的方法。


画出三角形的原理是调整border(边框)的四个方向的宽度,线条样式以及颜色。
如果你将宽度调的足够大,改变不同方向的颜色,你就可以发现盒模型的border是四个梯形一样的线条。
这个时候如果将盒模型内部的height,width调为0px,则三角形就形成了。

.triangle{
        width: 0;
        height: 0;
        border-left: 50px solid transparent;    //左边宽度50px,实线,透明颜色
        border-right: 50px solid transparent;    //右边同上
        border-top: 100px solid red;        //上边宽度100px,实线,红色
}

一个用css实现的三角形
由这个效果图我们可以看出,要生成一个三角形我们需要三条边框。
左右边框的高度会决定三角形的高有多长。
三角形高度则由边框自己的宽度决定
那么如何生成一个指向右下或者左下之类的这样的三角呢?
相信大家已经通过上面的图看出来了。
我们只需要两条边框就够了。

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


这段代码就会生成一个指向左下的三角形,底和高都是100px。
看到这里你可能想问,那我要是想做一个有边框的三角形呢?

只要用这个三角形中再写一个相同形状的稍小三角形,调整它的位置,就可以做出有边框的三角形了,是不是很简单

关键词:北京web前端培训,北京前端开发培训,web前端培训

热门课程推荐  点击查看全部课程

北京UI培训
  • 北京web前端培训
  • 北京UI培训
  • 北京web前端培训
  • 北京UI培训
  • 北京web前端培训
  • 北京UI培训
  • 北京web前端培训
北京UI培训
  • 14年教育品牌
  • 课程不断更新
  • 签订就业协议
  • 项目案例讲解
  • O2O教学模式

北京火星人科技文化发展中心版权所有 Copyright & copy 2002-2016 2ds.cn, All Rights Reserved 京ICP备 10216795号