【百度前端笔试题目--css 实现一个带尖角的正方形】的更多相关文章

百度前端笔试题目--css 实现一个带尖角的正方形

今天在牛客网上看到这道题,发现自己并不会,看来自己css都没怎么学习,也不怎么会用.看了下答案,不是很明白,也在网上搜集了一些资料和解法,感觉一些同学博客上也写了一些解法和拓展,所以就在这里借鉴一下咯.(参考地址:http://www.ithao123.cn/content-5672159.html) 实现图示的效果涉及到的知识主要有两点:一个是before.after伪元素,一个是border 1.before 和 after 都是css中的伪元素,通过给定一个属性content给元素添加新的…

用CSS画一个带阴影的三角形的示例代码

1. 思路 怎么用CSS3画一个带阴影的三角形呢 ? 有童鞋说, 这还不简单吗 网上有很多解决方案, 但其实大多都是实现不太完美的, 存在一些问题 假设我们做一个向下的三角形箭头 常见的方法大致有两种 通过边框控制, border-left和border-right设为透明, border-top设为预定的颜色即可 通过 transform 旋转盒子 方法一可以画三角形, 但是画阴影是很难做到的(如果做到的朋友, 欢迎给我留言) 2. 设计 2.1 边框法 html结构 ? 1 2 3 <bod…

html如何绘制带尖角（三角）的矩形

结合实际情况自己写的: .menu_triangle { height: 10px; width: 10px; background-color: #049888; transform: translate(75px, -5px) rotate(-45deg);} 摘要:网上有很多html+css制作带三角的矩形的方法,我在这里列举其中一种,兼容bootstrap3.我们先来看一个三角在左边的对话框的效果图矩形就不必说了,矩形的border-radius也不用说了,圆角可以自己设置,可以直接用b…

用CSS实现文本框尖角

经常看到这样的尖角,以前不懂,以为都是用图片做出来的,后来惊奇的发现,原来很多都是用CSS做出来的,既美观又节省资源,真是两全其美啊! 那么,用CSS怎么实现这种效果呢?首先,来写一个简单的代码: <div class="arrow"></div> .arrow { width:; height:; font-size:; border:solid 10px #000; } 这儿,我们可以得到一个黑色的正方形,其实这是边框组成的,因为div的宽度和高度都是0,.…

一个小公司的前端笔试HTML CSS JS

网上有这套题的答案,版本也很多,我做了很多参考.本文就当个小笔记,可能有错误,还望指正~ 第1章  Html篇 1. 你做的网页在哪些浏览器测试过?这些浏览器的内核分别是什么? 浏览器类型 内核 Firefox Gecko 搜狗.谷歌chrome WebKit 360 Chromium+Trident 2.每个HTML文件里开头都有个很重要的东西,Doctype,知道这是干什么的吗? <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transiti…

如何用css写一个带斜切角、有边框又有内外阴影的按钮呢？

如果有一天,UI设计师丢过来一张UI稿,上面有这样一个带有斜切角.有边框还有内外阴影的按钮,你会怎么实现呢?第一反应切图?可是按钮内容.大小都是可变的,那得切多少图啊~Canvas?SVG?No,no,no,今天我们用css手撸这个花里胡哨的按钮. 做之前我们先分析一下实现过程中的难点: 按钮的斜切角: 按钮的边框,也是带斜切角的: 按钮的内外阴影,不能覆盖斜切角的部分. 按钮主体部分实现 首先我们来实现按钮的主体和边框,说一下实现思路,css可以通过背景渐变实现斜切角的样式,但是这个时候边框就…

Effective前端(3)用CSS画一个三角形

来源:https://zhuanlan.zhihu.com/p/26160325 三角形的场景很常见,打开一个页面可以看到各种各样的三角形: 由于div一般是四边形,要画个三角形并不是那么直观.你可以贴一张png,但是这种办法有点low,或者是用svg的形式,但是太麻烦.三角形其实可以用CSS画出来.如上图提到,可以分为两种三角形,一种是纯色的三角形,第二种是有边框色的三角形,先介绍最简单的纯色三角形. 1. 三角形的画法 三角形可以用border画出来,首先一个有四个border的div应该是…

前端笔试题目小结--获取输入参数用户名；查询URL字符串参数

编写一个JavaScript函数getSuffix,用于获得输入参数的后缀名.如输入abc.txt,返回txt. str1 = "abc.txt"; function getSuffix(str) { var index =str.indexOf("."); if(index !=-1) { str = str.substring(index+1); } else{ str = "not find"; } return str; } var te…

前端笔试题目总结——应用JavaScript函数递归打印数组到HTML页面上

数组如下: var item=[{ name:'Tom', age:70, child:[{ name:'Jerry', age:50, child:[{ name:'William', age:20 }] }, { name:'Jessi', age:30 }]}]; 输出的HTTML如下: <ol> <li>name:Tom</li> <li>age:70</li> <li>children: <ol> <li&…

来自网易云的黑科技，带尖角的div......

今天在网易云的网页版听歌,话说Steve Vai的曲子永远是这么让人揣摩不透,不过我还时更喜欢老Joe,咦,跑题了··· 大家可以看到评论输入框和回复框,上面都有个小尖角,实现的方式有很多,我一般是用border来做,只要给一个元素加上这四条属性就行了: border-top: 400px solid red; border-right: 400px solid transparent; border-bottom: 400px solid transparent; border-left: 4…