test:after {display:inline-block; content:"^"; transform:rotate(180deg) scale(14,08);}
</style>
<span class="test">服务</span><script type="text/javascript">
var $ = function(id) {
return documentgetElementById(id);
}
var calc = function() {
var a = $("a")value() 1;
var b = $("b")value() 1;
var c = $("c")value() 1;
if (a > 0 && b > 0 && c > 0) {
if (a + b > c || a + c > b || b + c > a) {
alert("这是一个三角形！");
}
}
}
</script>新建文本文档
在桌面新建一个文本文档，并命名为“三角形”，打开新建的文本文档，把html里的doctype、head、body等框架搭好。
注意可以在写完之后再重新重命名为html文件。
2
创建div并用border属性控制
布局div，并命名id="tri"，用CSS来控制div，在style里面，使用border属性对div进行控制，
#tri{
width: 0px;
height: 0px;
border-top: 400px solid red;
border-right: 400px solid blue;
border-bottom: 400px solid green;
border-left: 400px solid yellow;
}
注意div的长宽设为0，border为边框，会看到如下四个三角状的图形。
3
修改并选择自己想要的三角形
上述代码画的还不是三角形，但是是四个三角，只要将border周边的颜色变成白色就可以了，例如除了border-bottom: 100px solid green;其余全变为white，就会看到如下效果，当然你也可以根据自己需要来调整。
此外可以将border-top的像素设为0；其余两边也调小一点并且颜色设为白色，就会只看到底下的一个三角形了。
注意根据自己实际来挑选自己想要达到的效果。图一图二效果不同，就是border设定不同的原因。
4
代码如下仅做参考：
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 401 Transitional//EN" "><!DOCTYPE HTML>
<html>
<head>
<meta charset= "utf8">
<title>untitled</title>
<link rel = "stylesheet" type = "text/css" href = "">
<style type = "text/css">
{
margin: 0px;
padding: 0px;
}
body{
width: 100%;
height: 100%;
background-color: #f3f3f3;
}
#a{
width: 0;
height: 0;
border-top: 0px solid transparent;
border-right: 500px solid #c1e3e7;
border-bottom: 300px solid transparent;
margin-left: calc(100% - 500px);
}
#b{
position: absolute;
width: 0;
height: 0;
border-bottom: 300px solid #e2e2e2;
border-left: 350px solid transparent;
border-right: 350px solid transparent;
margin-left: calc(100% - 500px);
transform: rotate(-10deg);
left: calc(-100% + 300px);
top: -50px;
}
</style>
</head>
<body>
<div id = 'a'></div>
<div id = 'b'></div>
</body>
</html>
献丑了
关于滚动条可以通过css限制他的长宽为0px 达到隐藏滚动条的效果
::-webkit-scrollbar{height:0px; /滚动条宽度 width/
}
欢迎分享，转载请注明来源：内存溢出
微信扫一扫
支付宝扫一扫
评论列表（0条）