北京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培训
  • 连接高校与企业
  • 课程不断更新
  • 可推荐就业
  • 项目案例讲解
  • O2O教学模式

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