前端——用div画菜鸟网站首页导航条“小三角”

今天学到一个新的知识点——用div来画“三角”。

之前本帅博主写过一篇《前端——菜鸟网站横向CSS导航条菜单：带小三角形》，里面也有介绍如何制作小三角形，不过它是用的现成的小三角图片，虽然也可以用，但是毕竟做网站的人，什么情况都可能会遇到，因此，还是自己画一个“三角”比较好。

下面就介绍一下如何用div画菜鸟网站首页导航条的小三角形。

菜鸟网站首页导航条如下：

可以看到这里有一个小三角。

那这到底但是怎么做的呢？

话不多说，先给各位客官上代码。

来啊！阿福，关门，放代码！~Biu~

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"><style>div{border: 10px solid;border-color: #333 transparent transparent transparent;width:0;}</style>
</head>
<body>
<div></div>
</body>
</html>

看吧，很简短的一段代码吧，我们来看一下效果~

哟，这么简单就出现一个小三角形了。

那么有的人会问，“你这个三角形是向下的，我要一个向上的或者向别的方向的，那可咋整呀？”

嘿，别说，我还真知道咋整。下面我们就来深入了解一下如何画三角形~

首先我们查看一下这个小三角形的盒模型

从上图我们可以发现，这个div是20*20的，但是只显示了一个三角形，也就是说，刚才的代码使得这个div的上部分显示出来的。

那如何让其他部分也显示出来呢？

哈哈，简单~~只要给其他三边加上颜色就可以了~

刚才大家可能看到这句 “border-color: #333 transparent transparent transparent; ”会有疑惑，这是啥意思类？

其实就是给border加上颜色啦。

这句语句的语法其实是：border-color：上右下左（即顺时针）。我们想要朝哪一边的三角形，我们只需要给哪一边附上颜色就好啦。

我们来试试四边都加上颜色。

把border-color的属性设置为：

border-color: #333 forestgreen blue cyan;

再运行一下，看看结果。

看吧，这样就有了四个方向的三角形。

接下来就是获得某一一个三角了，其实这也很简单，只需要用到border-width属性即可。

border-width和border-color的语法一样，它也有四个值，分别代表上右下左的宽度。

如果我们不想要哪一个部分的三角形，将其设为零就好。

比如上面，第一个三角形，

我想把它下面这个空白的区域取消。只要把bottom设为零就好了。

即border-width: 10px 10px 0 10px ;

效果如图：

当然，如果想要别的效果，也可以，你自己去试试就好啦。

好啦，以上就是如何用div画三角形的方法啦~这种方法比较好封装，大家以后可以多试试。

大家可以试试用文中的几种方法去实现菜鸟网站首页导航条的小三角形~~~

要是大家有什么别的方法，或者发现文章中有描述错误的地方，欢迎大家留言评论，我们一起学习呀~~

Biu~~~

前端——用div画菜鸟网站首页导航条“小三角”相关推荐

CSS+DIV固定底部的漂浮导航条（多浏览器兼容）
2019独角兽企业重金招聘Python工程师标准>>> CSS+DIV固定底部的漂浮导航条(多浏览器兼容) 博客分类: div css 在项目中.为了解决多浏览器兼容的问题..ie6 ...
仿淘宝网首页导航条效果
< html > < head > < meta http - equiv = " Content-Type " content = " ...
web前端项目详解：OPPO首页进度条特效（定时轮播）
web前端项目详解:OPP首页进度条特效(定时轮播) 知识点:布局结构分析,定位运用,页面兼容性问题,Jquery的基础运用(修改盒子样式,动画方法,简单算法,淡入淡出方法,定时器方法)代码结构效果 ...
夺命雷公狗---DEDECMS----14dedecms首页导航条的完成
我们的首页完成了,那么下一步就开始创建一个模型了, 添加好电影模型后我们来给他添加一些字段,这些字段主要还是要看我们的项目需求来添加的,因为我们的项目里有: 我们在项目中要用得上这些字段,所以要对他们 ...
DIV+CSS基础教程：导航条的制作详解
课程开始: 前三节课,我们知道了什么是"内容块状元素和内联元素",以及XHTML+CSS布局的核心概念"盒子模型",同时又学习了一下页面布局中两种方 ...
前端学习——纯CSS实现动态翻转导航条
纯CSS实现动态翻转导航条在学习动画的时候,一开始不知道写一个生命东西来进行学习,后来在网上看到了一些CSS实现的动画效果,觉得很酷炫,就在其中选了导航条来进行学习,导航条比较基础而且用的比较多,以 ...
html div挤下去了,网站固定导航条挤动下面的DIV_html/css_WEB-ITnose
这是导航栏CSS width: 1336px; background: #333; margin-top: 0px; font-size: 20px; z-index:9999; 这是下面div的CS ...
【使用DIV+CSS重写网站首页案例】CSS引入方式
CSS引入方式(3种) *就近原则:行内引入可以覆盖内部引入的效果内部引入: * type="text/css" 为默认可以不写例子: 1 <!DOCTYPE ...
京东网站顶部导航条（练习） HTML+CSS
作为初学者写的比较简单,很多地方不完善.还是记录一下吧. 目录一效果图二 HTML 三 CSS 一效果图二 HTML <!DOCTYPE html> <html lang=&q ...

前端——用div画菜鸟网站首页导航条“小三角”

前端——用div画菜鸟网站首页导航条“小三角”相关推荐

最新文章

热门文章