天兴工作室网页特效栏目会收集各类简单容易入手的js特效、jQuery特效、css特效、网页特效等各种效果。
之前一直用css写三角形，反正网上搜一个案例出来，能用就行。今天花了功夫弄懂了原理和使用方法，记录下来，希望能对跟我基础一样弱的人有所帮助。
首先css写三角形是通过border实现的，大多数人用border就是定义边框的。所以要用border来写三角形就会掉到边框的思维模式里面去出不来...
先来一个定义，元素的border其实是三角形组合成的，神不神奇？意不意外？
我们来一段代码证实下这个问题：
.box{
width:50px;
height:50px;
border-width:50px;
border-style: solid;
border-color:orange blue red green;
}然后你会发现页面显示是这个样子滴：
弄懂了这个概念那么三角形就好写了，例如我们要角向下的三角形，就把上边框颜色保留，其他三个颜色全部设置成透明“transparent”就行。
所以我们只需要来把上面的代码改成“border-color:orange transparent transparent transparent;”就行，验证下：
果然成功了，弄懂了原理和用法就可以弄出各种三角形了。还可以用多个div盒子拼凑弄出来其他各种各样的图形呢。
售价：免费 82755 ℃ 4 评论
售价：免费 82755 ℃ 4 评论
售价：免费 82755 ℃ 4 评论
u地址转错【THWtoUnsz3Bdh5YtPjenzeAQMGrW4PRhh7】转错请联系TeleGram:【@TrxEm】
trx能量机器人 评论于：适合做图片站的emlog主题模板 自定义色彩+自适应
u地址转错【TVF8JCRCWT2WhoPrruqNqNBvDtrB6nKxTD】转错请联系TeleGram:【@TrxEm】
trx能量租赁 评论于：适合做图片站的emlog主题模板 自定义色彩+自适应
u地址转错【TGxFmwwJnJqFJQyaYZU1AQ5QDDMUYdieJC】转错请联系TeleGram:【@TrxEm】
波场能量租赁 评论于：zblog系列视频教程第十节：页面修改和调整
u地址转错【TU5Q1vCr5VGzc4tbSWRoJ6XuBfCjswQXvx】转错请联系TeleGram:【@TrxEm】
节省TRX手续费 评论于：宝塔面板nginx设置证书时报错”nginx: [emerg] BIO_new_file“的解决办法
u地址转错【TWonQDtwMakQgvZZQsLNLj7eAtZqJLJ7Hg】转错请联系TeleGram:【@TrxEm】
节省TRX手续费 评论于：zblog如何调用用户？zblog调用网站用户的方法
u地址转错【TQLKny3sxXsnnREoLP91Nc2fAj52BcJrKr】转错请联系TeleGram:【@TrxEm】
波场能量租赁 评论于：天兴工作室第9款zblog企业主题 自带表单提交 邮件提醒等
Powered By Z-Blog， Theme By 天兴工作室，Copyright © 2012-2021， 鄂ICP备18027768号-1 | 
鄂公网安备 42011102002962号
已有 16 位小伙伴发表了看法
回应ta trx能量机器人 (游客)
评论于 2026-06-13 18:55:15
回应ta trx能量租赁 (游客)
评论于 2026-06-06 15:15:24
回应ta 节省TRX手续费 (游客)
评论于 2026-06-03 15:23:08
回应ta trx能量租赁 (游客)
评论于 2026-05-31 22:48:49
回应ta trx能量机器人 (游客)
评论于 2026-05-31 08:44:08
回应ta trx能量租赁 (游客)
评论于 2026-05-31 08:26:18
回应ta trx能量租赁 (游客)
评论于 2026-05-24 18:58:34
回应ta trx能量机器人 (游客)
评论于 2026-05-17 07:37:03
回应ta trx能量租赁 (游客)
评论于 2026-05-13 09:05:11
回应ta 节省TRX手续费 (游客)
评论于 2026-05-13 03:37:14
欢迎 你 发表评论