css(面试第2天)用css绘制三角形

css(面试第2天)用css绘制三角形的相关文章

纯CSS绘制三角形

使用CSS绘制三角形 正三角形的绘制: 1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8"> 5 <title>正三角形</title> 6 <style type="text/css"> 7 #triangle-up { 8 width: 0; 9 height: 0; 10

css绘制三角形

今天看到人家用css画了一个三角形,简简单单几行代码,惊讶css其实还有很多我们不知道的东西. 三角形其实还是可以用在很多地方的.其实就那么几行代码直接贴上: div.arrow-up {     width: 0;     height: 0;     border-left: 50px solid transparent;     border-right: 50px solid transparent;     border-bottom: 50px solid #2f2f2f;     

css绘制三角形原理

1.新建一个元素,将它的宽高都设置为0:然后通过设置border属性来实现三角形效果,下面是css绘制三角形的原理: <!DOCTYPE html> <html> <head lang="en"> <meta charset="UTF-8"> <title></title> <style> .caret{ height:0;/*将宽高都设置为0*/ width:0; border:1

html和CSS面试题目归总2

媒体:DOCTYPE作用?严格模式和混杂模式如何区别? 酱油:DOCTYPE标签是一种标准通用标记语言的文档类型说明,他的目的是要告诉标准通用标记语言解析器,他应该用什么样的文档类型定义即dtd来解析文档. 区别:严格模式:申明正确的DTD 混杂模式:不申明DTD或者在DOCTYPE加入XMl申明 媒体:HTML5为什么只写<!DOCTYPE HTML> 酱油:HTML5不基于SGML,因此不需要对DTD进行引用. 媒体:html5有哪些新特性,移除了哪些元素? 酱油:新特性:(举例说明一下既

CSS用border绘制三角形

使用border绘制三角形的思路,就是border值设置一个很大的值,元素自身的宽高设置为0,全部由边线占据,这样每边就会显示为四分之一块的三角形.这样不借助图片,可以直接绘制出三角形了. 一个栗子: <!DOCTYPE html PUBliC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <ht

css 利用border 绘制三角形. triangle

1.基础三角形. 1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8"> 5 <title>全局css以及辅助css</title> 6 <style type="text/css"> 7 8 9 10 /***1: 初始样式设置*******/ 11 html, body, u

css面试试题小结

行内元素:会在水平方向排列,不能包含块级元素,设置width无效,height无效(可以设置line-height),margin上下无效,padding上下无效.告知浏览器的解析器用什么文档标准解析这个文档.DOCTYPE不存在或格式不正确会导致文档以兼容模式呈现.link属于XHTML标签,除了加载CSS外,还能用于定义RSS, 定义rel连接属性等作用:而@import是CSS提供的,只能用于加载CSS.link写在html页面中,@import写在CSS页面中页面被加载的时,link会同

CSS绘制三角形的原理剖析

今天学习Bootstrap时候,看到按钮的向下三角形源码: 1 .caret { 2 display: inline-block; 3 width: 0; 4 height: 0; 5 margin-left: 2px; 6 vertical-align: middle; 7 border-top: 4px solid; 8 border-right: 4px solid transparent; 9 border-left: 4px solid transparent; 10 } 我对bord

CSS减肥的工具–Firefox插件 CSS Usage

首先,我们需要安装Firefox(猛击此处下载),或者确定你已经安装的版本已经高于3.1; 第二步,安装前端开发人员最普及的开发工具 Firebug: 第三步,安装CSS Usage 0.3.4.1: 第四步,在浏览器中打开我们要优化的页面(本地的页面也可以),点击右下角的firebug小图标,打开firebug工具窗口,我们会看到在工具选项中我们有一个 CSS Usage工具的按钮. 首先我们来分析最上面的三个功能按钮的使用 Scan: 通过字面意思我们就能知道,这是一个扫描当前页面的工具,如