文档章节

下拉菜单

我是一只女汉子
 我是一只女汉子
发布于 2017/06/28 14:52
字数 1282
阅读 3
收藏 0

前些天在牛课网上看到了一个百度的面试题,题目如下:

请用CSS实现如下图的样式,相关尺寸如图示,其中dom结构为:
<div id=”demo”></div>

 

刚看到这个题目觉得无从下手,感觉一般这种不都是一个背景图片吗,怎么还能用css写的?? 后来看到网友的答案,试着运行了一下发现真的和图上的一模一样,最伤心的是看到答案竟然还看不懂。。觉得自己还是好水,仔细琢磨了一下,现将心得整理一下:

 

实现图示的效果涉及到的知识主要有两点:一个是before、after伪元素,一个是border

1、before 和 after 都是css中的伪元素,他们俩用法都差不多,通过给定一个属性content给元素添加新的内容,不同的是before用来在元素前插入新内容,after用来在元素后面插入新内容。

比如有一个p元素:水

<p>水</p>

如果给这个p元素设置一个before:

p:before{
  content:"上海自来";
}

这个p就变成了:上海自来水,content属性的值就添加到了p元素内容的前面。

 

相反的,如果是用after:

p:after{
  content:"来自海上";
}

这个p就会变成:水来自海上。

 

简单的before、after使用就是这样,一开始看的时候觉得好简单,不就是插入个内容吗,但实际上插内容不算什么,最重要的是它能设!置!样!式!一旦给它设置各种各样的样式之后这个伪元素就厉害了,比如题目中的尖角,题目只给了一个div我们,但是很明显div只能弄出一个左边的带边框正方形,右边的尖角怎么来的呢,那就可以靠这个伪元素了。

思路很简单,先把正方形画出来,然后通过before或者after变出一个尖角出来,放到正方形右上角去。div如下:

#demo{
  width:100px;
  height:100px;
  background-color:#fff;
  border: 2px #000 solid;
}

好,这个时候正方形已经出来了,但是三角形怎么画出来呢,这就要用到border了

 

 

2、以前使用border都是border:1px #000 solid,顶多换换颜色和边框值,没想到画三角形也能靠它……

以前没发现的原因在于使用border的时候总是1px、2px的,太细了,当把边框变成20px的时候就有意思了,下面是一个边长10px的正方形设置其边框长也为10px:

我们知道可以通过设置border-left等等手动设置四个边框为不同颜色,分别设置之后:

马上看出靠谱,如果把这个div的宽度减小到0之后岂不就是四个三角形了,动手实验:

果然是,那把上下右的颜色变透明之后就能得到一个三角形拉,在这里要注意的是把其他三个边透明是能得到一个三角形的,但是如果只设置左边框而不设置其他三个边框是得不到的,自己动手试下便知,因为如果只设置左边框,而这个div的高度又为0,那这个左边框是不会向上下两端扩展的,只有当上或下也有边框时才会呈现出一个三角形,所以我们可以把所有边框透明掉,然后把左边框显示即可。比如下面这样:

 

diiv{
  width:0px;
  height:0px;
  border: 20px transparent solid;
  border-left-color: #000;
}

      就能得到这个效果了:

 

 

那把三角形放到正方形右侧就很简单了,有一点是那个正方形是缺了一段的,我们可以让三角形颜色为白色覆盖掉正方形的边框,另外再用一个黑色的比白色三角形大一点的三角形放在白三角形下面,这样就只漏出了三角形的两条边,所以这里同时用到了before和after。

因为before和after插入的三角形是放在指定的位置的,所以它们的position都设置为绝对定位,那么div就要设置成相对定位了:

 

#demo{
  width:100px;
  height:100px;
  border: 2px #000 solid;
  background-color:#fff;
  position:relative;
}


 

 

首先是黑色的三角形:

 

#demo:before{
  width:0px;
  height:0px;
  border: 10px transparent solid;
  border-left-color: #000;
  position:absolute;
  top:20px;
  left:100%;
  content:""
}


注意content虽然没有值,但是必须得加上。现在效果如下:

 

然后是比黑色三角形小一点点的白色三角形:

 

#demo:after{
  width:0px;
  height:0px;
  border: 8px transparent solid;
  border-left-color: #fff;
  position:absolute;
  top:22px;
  left:100%;
  content:""
}

注意白色三角形比褐色三角形要小,所以边框长度就小2px,且top也大2px,效果如下:

 

由此这个题目就做完拉,当然相同的样式可以整理下,最终样式如下:

 

#demo{
			  width:100px;
			  height:100px;
			  border: 2px #000 solid;
			  background-color:#fff;
			  position:relative;
			}
			#demo:before, #demo:after{
			  width:0px;
			  height:0px;
			  border:transparent solid;
			  position:absolute;
			  left:100%;
			  content:""
			}
			#demo:before{
			  border-width:10px;
			  border-left-color: #000;
			  top:20px;
			}
			#demo:after{
			  border-width:8px;
			  border-left-color: #fff;
			  top:22px;
			}

 

© 著作权归作者所有

上一篇: CSS3盒阴影
下一篇: 浏览器通用字体
我是一只女汉子
粉丝 0
博文 29
码字总数 10986
作品 0
沈阳
私信 提问

暂无文章

spring cloud

一、从面试题入手 1.1、什么事微服务 1.2、微服务之间如何独立通讯的 1.3、springCloud和Dubbo有哪些区别 1.通信机制:DUbbo基于RPC远程过程调用;微服务cloud基于http restFUL API 1.4、spr...

榴莲黑芝麻糊
18分钟前
2
0
Executor线程池原理与源码解读

线程池为线程生命周期的开销和资源不足问题提供了解决方 案。通过对多个任务重用线程,线程创建的开销被分摊到了多个任务上。 线程实现方式 Thread、Runnable、Callable //实现Runnable接口的...

小强的进阶之路
昨天
6
0
maven 环境隔离

解决问题 即 在 resource 文件夹下面 ,新增对应的资源配置文件夹,对应 开发,测试,生产的不同的配置内容 <resources> <resource> <directory>src/main/resources.${deplo......

之渊
昨天
8
0
详解箭头函数和普通函数的区别以及箭头函数的注意事项、不适用场景

箭头函数是ES6的API,相信很多人都知道,因为其语法上相对于普通函数更简洁,深受大家的喜爱。就是这种我们日常开发中一直在使用的API,大部分同学却对它的了解程度还是不够深... 普通函数和...

OBKoro1
昨天
7
0
轻量级 HTTP(s) 代理 TinyProxy

CentOS 下安装 TinyProxy yum install -y tinyproxy 启动、停止、重启 # 启动service tinyproxy start# 停止service tinyproxy stop# 重启service tinyproxy restart 相关配置 默认...

Anoyi
昨天
2
0

没有更多内容

加载失败,请刷新页面

加载更多

返回顶部
顶部