教你如何做一个三角形

在电脑上打开网页编辑器,新建一个HTML页面,如图:
在这里插入图片描述
制作一个宽、高为0,边框为100px的正方形,如图:
在这里插入图片描述
然后给这个正方形的各个边框设置边框色,把其中一个边框色设置为blue,其他

的设置为透明的,即:border-color:blue transparenttransparent transparent;代码如图:
在这里插入图片描述
用浏览器打开该页面,查看css绘制的三角形效果;

点击页面单击鼠标右键,选择【查看元素】,打开浏览器的代码控制台,可查看当前网页源码,或代码调试。

在这里插入图片描述
由于ie6不支持transparent,所以没有透明效果,就需要把border-style:solid

dashed dashed dashed;一个三角形就制作好了,如图:加粗样式
在这里插入图片描述
将两个相邻的三角形拼在一起,也可以得到一个三角形。只要将正方形的两个相邻边框都设置成非透明色即可,代码如图:
在这里插入图片描述
在这里插入图片描述

  • 3
    点赞
  • 2
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值