百度前端笔试题目--css 实现一个带尖角的正方形
今天在牛客网上看到这道题，发现自己并不会，看来自己css都没怎么学习，也不怎么会用。看了下答案，不是很明白，也在网上搜集了一些资料和解法，感觉一些同学博客上也写了一些解法和拓展，所以就在这里借鉴一下咯。（参考地址：http://www.ithao123.cn/content-5672159.html）
实现图示的效果涉及到的知识主要有两点：一个是before、after伪元素，一个是border
1、before 和 after 都是css中的伪元素，通过给定一个属性content给元素添加新的内容
before：用来在元素前插入新内容。
after：用来在元素后面插入新内容。
（1）before 给元素添加内容实例：
<p>我</p>
如果给这个p元素设置一个before：
p:before{ content:"爱你"; }
这个p就变成了：我爱你，content属性的值就添加到了p元素内容的前面。
（2）after 给元素添加内容实例：
<p>我</p>
p:after{ content:"20岁了"; }
这个p就会变成：我20岁了
2、利用伪元素设置css样式，如题目中的尖角，题目只给出一个div，只能弄出左边的带边框正方形，右边的尖角怎么来的呢？那就可以靠这个伪元素来完成了。
思路解析：
（1）先把正方形画出来
#demo{
width:100px;
height:100px;
background-color:#fff;
border: 2px #000 solid;
position: relative;
}
（2）通过before或者after变出一个尖角出来。放到正方形右上角去。
1)首先，我们复习一下border属性。
- border-width：
thin（细边框） medium （中等边框）thick（细边框） 10px（像素值）只有当边框样式不是 none 时才起作用
- border-style：
dotted （点状）solid（实线） double（双线） dashed（虚线）;
- border-color：设置不同的颜色
2)boder实例：
- 一个边长为20px的正方形，设置border为20px，可得效果：
，html代码如下：
<html>
<head>
<title></title>
<style type="text/css">
#demo{
width:20px;
height:20px;
background-color:#fff;
border: 20px #000 solid; }
</style>
</head>
<body>
<div id="demo"> </div>
</body>
</html>
- 我们可以根据border-left,border-right,border-top,border-bottom手动设置四个边框为不同颜色
，css代码如下： #demo
{
width:20px;
height:20px;
background-color:#fff;
border-left: 20px pink solid;
border-right:20px red solid;
border-top:20px green solid;
border-bottom:20px blue solid;
}- 将div宽度设置为0，则可见四个彩色小三角形。
css代码修改如下：
#demo
{
width:0px;
height:0px;
background-color:#fff;
border-left: 20px pink solid;
border-right:20px red solid;
border-top:20px green solid;
border-bottom:20px blue solid;
}3）拓展思考，如果将三边边框透明，是不是就可以实现一个小三角形？
- 如果只设置左边框，不设置其他三个边框。
#demo
{
width:0px;
height:0px;
background-color:#fff;
border-left: 20px pink solid;
/*border-right:20px red solid;
border-top:20px green solid;
border-bottom:20px blue solid;*/
}实验结果：页面空白。原因：因为如果只设置左边框，而这个div的高度又为0，那这个左边框是不会向上下两端扩展。
- 只不设置左边框，其余三边均设置。
#demo
{
width:0px;
height:0px;
background-color:#fff;
border-left: 20px pink solid;
/*border-right:20px red solid;*/
border-top:20px green solid;
border-bottom:20px blue solid;
}实验结果：
。分析：未设置左边框，所以上下边框只向右边扩展。 - 只设置左边框，不设置右边框，上下边框设置透明。
#demo
{
width:0px;
height:0px;
background-color:#fff;
border-left: 20px pink solid;
/*border-right:20px red solid;*/
border-top:20px transparent solid;
border-bottom:20px transparent solid;
}
实验结果：
分析，上下边框设置透明，左边框向上下扩展。
- 实现一个小三角，先设置四边透明，再设置颜色，代码更简洁：
#demo
{
width:0px;
height:0px;
border: 20px transparent solid;
border-left-color: #000;
}（3）把三角形放到正方形右侧。
分析：正方形是缺了一段，我们可以让三角形颜色为白色覆盖掉正方形的边框，另外再用一个黑色的比白色三角形大一点的三角形放在白三角形下面，这样就只漏出了三角形的两条边，所以这里就要用到before和after。
1）因为before和after插入的三角形是放在指定的位置的，所以它们的position都设置为绝对定位absolute，那么div就要设置成相对定位relative。
这里首先回顾一下定位的区别：position(static(默认)|relative|fixed|absolute)
static:按照浏览器正常的文档流摆放 top left right bottom
relative：相对于static本来位置。即默认的位置
absolute 相对于父类元素定位，父元素的position必须是relative或者是absolute，如果不是，则继续往上查找父元素，如果一直找不到，则最后相对于body定位。
fixed：相对于body元素
2）首先绘出黑三角形
#demo:before {
content: ' ';
width:;
height:;
border: solid transparent;
left: 100%;
top: 18px;
position: absolute;
border-width: 12px;
border-left-color: #000;
}
实验结果：
3）绘制白色三角形
#demo:after
{
content: ' ';
width:;
height:;
border: solid transparent;
left: 100%;
top: 20px;
position: absolute;
border-width: 10px;
border-left-color: #fff;
}
实验结果：
（4）整理CSS重叠属性，简化代码，最终完整页面HTML代码如下：
<html>
<head>
<title>demo</title>
<style type="text/css">
#demo
{
width: 100px;
height: 100px;
background-color: #fff;
position: relative;
border: 2px solid #000;
} #demo:before, #demo:after
{
border: solid transparent;
content: ' ';
height: 0px;
width: 0px;
left: 100%;
position: absolute;
}
#demo:before {
border-width: 12px;
border-left-color: #000;
top: 18px; }
#demo:after
{
top: 20px;
border-width: 10px;
border-left-color: #fff;
} </style>
</head>
<body>
<div id="demo"> </div>
</body>
</html>
（5）终于完全明白了。2015-09-12 meggie
百度前端笔试题目--css 实现一个带尖角的正方形的更多相关文章
- 用CSS画一个带阴影的三角形的示例代码
1. 思路 怎么用CSS3画一个带阴影的三角形呢 ? 有童鞋说, 这还不简单吗 网上有很多解决方案, 但其实大多都是实现不太完美的, 存在一些问题 假设我们做一个向下的三角形箭头 常见的方法大致有两种 ...
- html如何绘制带尖角（三角）的矩形
结合实际情况自己写的: .menu_triangle { height: 10px; width: 10px; background-color: #049888; transform: transl ...
- 用CSS实现文本框尖角
经常看到这样的尖角,以前不懂,以为都是用图片做出来的,后来惊奇的发现,原来很多都是用CSS做出来的,既美观又节省资源,真是两全其美啊! 那么,用CSS怎么实现这种效果呢?首先,来写一个简单的代码: & ...
- 一个小公司的前端笔试HTML CSS JS
网上有这套题的答案,版本也很多,我做了很多参考.本文就当个小笔记,可能有错误,还望指正~ 第1章 Html篇 1. 你做的网页在哪些浏览器测试过?这些浏览器的内核分别是什么? 浏览器类型 内核 Fi ...
- 如何用css写一个带斜切角、有边框又有内外阴影的按钮呢？
如果有一天,UI设计师丢过来一张UI稿,上面有这样一个带有斜切角.有边框还有内外阴影的按钮,你会怎么实现呢?第一反应切图?可是按钮内容.大小都是可变的,那得切多少图啊~Canvas?SVG?No,no ...
- Effective前端(3)用CSS画一个三角形
来源:https://zhuanlan.zhihu.com/p/26160325 三角形的场景很常见,打开一个页面可以看到各种各样的三角形: 由于div一般是四边形,要画个三角形并不是那么直观.你可以 ...
- 前端笔试题目小结--获取输入参数用户名；查询URL字符串参数
编写一个JavaScript函数getSuffix,用于获得输入参数的后缀名.如输入abc.txt,返回txt. str1 = "abc.txt"; function getSuf ...
- 前端笔试题目总结——应用JavaScript函数递归打印数组到HTML页面上
数组如下: var item=[{ name:'Tom', age:70, child:[{ name:'Jerry', age:50, child:[{ name:'William', age:20 ...
- 来自网易云的黑科技，带尖角的div......
今天在网易云的网页版听歌,话说Steve Vai的曲子永远是这么让人揣摩不透,不过我还时更喜欢老Joe,咦,跑题了··· 大家可以看到评论输入框和回复框,上面都有个小尖角,实现的方式有很多,我一般是用 ...
随机推荐
- Struts2 之 ognl
OGNL表达式语言(#号的用法) 用法1:访问OGNL上下文和Action上下文,#相当ActionContext.getContext() 1. 如果访问其他Context中的对象,由于他们不是根 ...
- JAVA-3-水仙花
public static void main(String[] args) { // TODO 自动生成的方法存根 int i = 100; while (i < 1000) { int a, ...
- bootstrap兼容IE8的一些注意
准备 bootstrap 3.3.5 jQuery 1.12.0 注意 支持html5 需要引入html5.js 支持placeholder 需要引入placeholder.js ie8 不支持 fo ...
- android 手机信息获取
1. adb已安装 2. adb shell getprop 此时已列出所有相关信息
- 一个Div在BOdy中上下左右居中
在body中让一个DIv居中 上下左右 <body> <div style=" width:800px; height:500px; position:absolute; ...
- Applet： 用HTML调用Applet的几个注意事项
问题:HTML找不到java class. 首先,如果xxx.java文件与HTML文件在同一目录下,直接运行cmd-javac 该 xxx.java文件,生成xxx.class文件.HTML中的&l ...
- HDU_2017——统计数字字符出现的个数
Problem Description 对于给定的一个字符串,统计其中数字字符出现的次数. Input 输入数据有多行,第一行是一个整数n,表示测试实例的个数,后面跟着n行,每行包括一个由字母和数 ...
- DPDK2.1开发者手册3-4
环境抽象层EAL 环境抽象层的任务对访问底层资源例如硬件和内存提供入口.它提供了隐藏应用和库的特殊性性的通用接口.它的责任是初始化分配资源(内存,pci设备,定时器,控制台等等). EAL提供的典型服 ...
- 【KMP】剪花布条
KMP算法 又水了一题.算是巩固复习吧. Problem Description 一块花布条,里面有些图案,另有一块直接可用的小饰条,里面也有一些图案.对于给定的花布条和小饰条,计算一下能从花布条中尽 ...
- StoryBoard 设置TabBar SelectImage 和tintColor
如图:StoryBoard 结构是 Tabbar + Navi + ViewController 需求:需要修改TabBar的Image 和SelectImage 设置Image 设置SelectIm ...