提供zblog模板 emlog模板 dedecms模板的下载和仿站定制
当前位置:网站首页 > 教程 > 网页特效 > 正文

css写三角形的原理和使用方法

天兴工作室 2019-11-30 网页特效 40 0 评论


之前一直用css写三角形,反正网上搜一个案例出来,能用就行。今天花了功夫弄懂了原理和使用方法,记录下来,希望能对跟我基础一样弱的人有所帮助。

css写三角形的原理和使用方法 css特效 css三角形 css3 网页特效 第1张

首先css写三角形是通过border实现的,大多数人用border就是定义边框的。所以要用border来写三角形就会掉到边框的思维模式里面去出不来...

先来一个定义,元素的border其实是三角形组合成的,神不神奇?意不意外?

我们来一段代码证实下这个问题:

.box{
    width:50px;
    height:50px;
    border-width:50px;
    border-style: solid;
    border-color:orange blue red green;
}

然后你会发现页面显示是这个样子滴:

css写三角形的原理和使用方法 css特效 css三角形 css3 网页特效 第2张

弄懂了这个概念那么三角形就好写了,例如我们要角向下的三角形,就把上边框颜色保留,其他三个颜色全部设置成透明“transparent”就行。

所以我们只需要来把上面的代码改成“border-color:orange transparent transparent transparent;”就行,验证下:

css写三角形的原理和使用方法 css特效 css三角形 css3 网页特效 第3张

果然成功了,弄懂了原理和用法就可以弄出各种三角形了。还可以用多个div盒子拼凑弄出来其他各种各样的图形呢。

没有找到解决你问题的教程?

您可以试着搜索一下或者直接在线提问。我们也提供收费技术支持,有需要可以在线联系我们。

在线提问 在线客服

取消回复欢迎 发表评论:

  • 请填写验证码
  • 最新文章
  • 热文排行
  • 最多评论
标签聚合
×58zblog模板×33zblog×27zblogphp×20zblogphp模板×19天兴工作室×17阿里云×12dedecms×11电子券×11ytcms×11zblog企业模板×11zblog插件×10天兴互联×9随意打×9模板×9zblog安装×9zblogphp1.5×9zblog错误×8天兴通讯×8刷机×8企业模板

请登录

社交账号登录

将本文分享给你的朋友们