视频链接：
如何用纯CSS绘制三角形 - Web前端工程师面试题讲解
首先先看一下例子：
1.html：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<link rel="stylesheet" type="text/css" href="1.css">
</head>
<body>
<div class="div1"></div>
<div class="div2"></div>
</body>
</html>
1.css：
.div1{
width: 250px;
height: 250px;
background-color: #64c4ed;
/*
令正方形的上下左右都间隔其他元素40px像素
auto 则使其摆在一行的正中间
*/
margin: 40px auto;
}
.div2{
width: 0;
height: 0;
border: 125px solid #f6d365;
margin: 0 auto;
}
可以看到如下的效果显示，它们的图像竟然都是正方形：
这是因为div2的width:0;height: 0;相当于变成了一个点，依靠边框border则只会显示边框的厚度了，下面以div1的为例子说明。
此外，要选择切分一个250px的正方形成等分的四块，边框是选择通过对角线切分的。
那么也就是说可以利用划分出四个不同边框去切分一个正方形变成四个相同大小的三角形，下面的代码为例：
1.css：
.div1{
width: 0;
height: 0;
background-color: #ffff;
border-top: 125px solid #f6d365;
border-left: 125px solid #64c4ed;
border-right: 125px solid red;
border-bottom: 125px solid rebeccapurple;
margin: 40px auto;
}
可以看到对角线交叉的中心点垂直到边的距离是125px
不写的边框会被忽略掉，而去选择与相邻且设定好的边框构成新的正方形
.div1{
width: 0;
height: 0;
background-color: #ffff;
border-top: 125px solid #f6d365;
border-left: 125px solid #64c4ed;
margin: 40px auto;
}
正方形的长和宽都为125px
那么要想弄一个三角形，就要选择隐藏另外三个三角形了，同时要记得去掉背景颜色带来的影响，但是我发现不能直接使用transparent，而是要通过rgba修改透明度达到同样的效果。
.div1{
width: 0;
height: 0;
border-top: 125px solid rgba(255,0,0,0);
border-left: 125px solid rgba(255,0,0,0);
border-bottom: 125px solid rgba(255,0,0,1);
border-right: 125px solid rgba(255,0,0,0);
margin: 40px auto;
}
下面这样写也可以达到上图同样的效果
原理：利用处于文档流中的元素会自动的从左到右(非块级元素),从上到下(块级元素)的排列规则，达到从上到下显示width这个实体
.div1{
width: 0;
border: 125px solid transparent;
border-bottom-color: rgba(255,0,0,1);
margin: 40px auto;
}
那么要想写不同角度的三角形，则只需修改边框的方向即可
.div1{
width: 0;
height: 0;
border: 125px solid transparent;
border-bottom-color: rgba(255,0,0,1);
display: inline-block;
}
.div2{
width: 0;
height: 0;
border: 125px solid transparent;
border-right-color: rgba(255,0,245,1);
display: inline-block;
}
display:inline-block，block，inline元素的区别display：block将元素显示为块级元素，每一个块级元素都是从新的一行开始。
display:inline将元素显示为行内元素，高度，行高以及底边距不可改变，高度就是内容文字或者图片的宽度。多个相邻的行内元素排在同一行里，直到页面一行排列不下，才会换新的一行。
display:inline-block行内块级元素会排列在同一行。
仅需修改border对应的属性即可
.div1{
width: 250px;
height: 250px;
border: 5px dashed red;
/* border-bottom-color: rgba(255,0,0,1); */
margin: 40px auto;
/* clear: both; */
}
我在MiniTest::Spec和Capybara中使用以下规范:find_field('Email').must_have_css('[autofocus]')检查名为“电子邮件”的字段是否具有autofocus属性。doc说如下:has_css?(path,options={})ChecksifagivenCSSselectorisonthepageorcurrentnode.据我了解，字段“Email”是一个节点，因此调用must_have_css绝对有效!我做错了什么？ 最佳答案 通过JonasNicklas得到了答案:No
我有一个div，它根据表单是否正确提交而改变。我想知道是否可以检查类的特定元素？开始元素看起来像这样。如果输入不正确，添加错误类。 最佳答案 试试这个:browser.div(:id=>"myerrortest").class_name更多信息:http://watir.github.com/watir-webdriver/doc/Watir/HTMLElement.html#class_name-instance_method另一种选择是只查看具有您期望的类的div是否存在browser.div((:id=>"myerrortes
A/ctohttp://wiki.nginx.org/CoreModule#usermaster进程曾经以root用户运行，是否可以以不同的用户运行nginxmaster进程？ 最佳答案 只需以非root身份运行init脚本(即/etc/init.d/nginxstart)，就可以用不同的用户运行nginxmaster进程。如果这真的是你想要做的，你将需要确保日志和pid目录(通常是/var/log/nginx&/var/run/nginx.pid)对该用户是可写的，并且您所有的listen调用都是针对大于1024的端口(因为绑定(
我正在尝试解决http://projecteuler.net/problem=1.我想创建一个方法，它接受一个整数，然后创建一个包含它前面的所有整数的数组，并将整数本身作为数组中的值。以下是我目前所拥有的。代码不起作用。defmake_array(num)numbers=Array.newnumcount=1numbers.eachdo|number|numbers 最佳答案 (1..num).to_a是您在Ruby中需要做的全部。1..num将创建一个Range对象，以1开始并以任意值num结束是。Range对象有to_a方法通过
我有这样的HTML代码:Label1Value1Label2Value2...我的代码不起作用。doc.css("first").eachdo|item|label=item.css("dt")value=item.css("dd")end显示所有首先标记，然后标记标签，我需要“标签:值” 最佳答案 首先，您的HTML应该有和中的元素:Label1Value1Label2Value2...但这不会改变您解析它的方式。你想找到s并遍历它们，然后在每个你可以使用next_element得到;像这样:doc=Nokogiri::HTML(
我开始了一个新的Rails3.2.5项目，Assets管道不再工作了。CSS和Javascript文件不再编译。这是尝试生成Assets时日志的输出:StartedGET"/assets/application.css?body=1"for127.0.0.1at2012-06-1623:59:11-0700Servedasset/application.css-200OK(0ms)[2012-06-1623:59:11]ERRORNoMethodError:undefinedmethod`each'fornil:NilClass/Users/greg/.rbenv/versions/1
rails新手。只是想了解\assests目录中的这两个文件。例如，application.js文件有如下行://=requirejquery//=requirejquery_ujs//=require_tree.我理解require_tree。只是将所有JS文件添加到当前目录中。根据上下文，我可以看出requirejquery添加了jQuery库。但是它从哪里得到这些jQuery库呢？我没有在我的Assets文件夹中看到任何jquery.js文件——或者直接在我的整个应用程序中没有看到任何jquery.js文件？同样，我正在按照一些说明安装TwitterBootstrap(http:
我正在尝试消除使用Bootstrap3的Rails4元素中的glyphicon错误。我没有使用任何Bootstrapgem将其添加到Assets管道中。我手动将bootstrap.css和bootstrap.js添加到各自的app/assets目录下，分别添加到application.css和application.js什么的我现在在网络浏览器的控制台中看到以下内容:GEThttp://localhost:3000/fonts/glyphicons-halflings-regular.woff404(NotFound)localhost/:1GEThttp://localhost:30
我在游戏和帐户模型之间存在多对多关系，如下所示:classAccount:destroyhas_many:games,:through=>:account_gamesendclassGame:destroyhas_many:accounts,:through=>:account_gamesendclassAccountGame现在我知道让我们说我想创建一个类似这样的记录:@account=Account.new(params[:user])@account.games但是我应该如何在执行此操作时更新AccountGame中的某些属性？假设AccountGame有一些名为score的字段
我有一个使用twitterbootstrap和sass的Rails元素。scss文件结构化到文件夹中，所以我有更好的概述。现在我想为包含我的颜色等的全局变量定义一个文件，并将这些值传递给其他文件，这样我就有更少的冗余代码。虽然所有代码都已正确导入和应用，变量不起作用。这是当前的设置:样式表/application.css.scss/**=require_self*=require_tree*//*stylesheets/||–base/||–_reset.scss#Reset/normalize||–_typography.scss#Typographyrules||–componen