1、利用CSS实现一个三角形
1.1实现思路
（1）将元素的宽度和高度设置为0，同时设置4个边的颜色和宽度，出现4个三角形。
（2）将其中3个边设置为透明。
1.2源代码
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>CSS实现三角形</title>
<style type="text/css">
.div1{
width: 0px;
height: 0px;
border-top: 100px solid red;
border-bottom:100px solid yellow;
border-left:100px solid blue;
border-right: 100px solid gray;
}
.div-top{
width: 0px;
height: 0px;
border-top: 100px solid transparent;
border-bottom:100px solid yellow;
border-left:100px solid transparent;
border-right: 100px solid transparent;
float: left;
}
.div-bottom{
width: 0px;
height: 0px;
border-top: 100px solid red;
border-bottom:100px solid transparent;
border-left:100px solid transparent;
border-right: 100px solid transparent;
float: left;
}
.div-left{
float: left;
width: 0px;
height: 0px;
border-top: 100px solid transparent;
border-bottom:100px solid transparent;
border-left:100px solid transparent;
border-right: 100px solid gray;
}
.div-right{
float: left;
width: 0px;
height: 0px;
border-top: 100px solid transparent;
border-bottom:100px solid transparent;
border-left:100px solid blue;
border-right: 100px solid transparent;
}
</style>
</head>
<body>
<h3>1、将元素的宽度和高度设置为0 ，设置4个边的颜色和宽度。出现4个三角形。</h3>
<div class="div1"></div>
<h3>2、设置3个变透明</h3>
<div class="div-top"></div>
<div class="div-right"></div>
<div class="div-bottom"></div>
<div class="div-left"></div>
</body>
</html>
1.3运行效果
CSS三角形
2、CSS 导航下边三角形
2.1实现效果
效果
2.2实现思路
（1）使用一个div中，放置3个div内容、红色三角形、蓝色三角形。
（2）设置div的布局为相对定位，设置红色和蓝色三角形的盒子为绝对定位。
（3）设置红色三角形盒子top:50%，y轴偏移到中间，但是盒子并不是在中间，通过margin-top:-20px. 向上偏移三角形的一半，这样红色三角形正好到中间。
（4）设置蓝色三角形盒子left:50%，x轴偏移到中间，但是盒子并不是在中间，通过margin-left:-20px. 向走偏移三角形的一半，这样蓝色三角形正好到中间。
2.3源代码
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>CSS实现三角形</title>
<style type="text/css">
body{
margin: 0px;
}
.div{
width: 200px;
height: 200px;
margin-left: 100px;
margin-top: 100px;
position: relative;
}
.div .content{
width: 200px;
height: 200px;
border: 1px solid red;
}
.div .right{
position: absolute;
left: 200px;
top: 50%;
width: 0px;
height: 0px;
border-left: 20px solid red;
border-right: 20px solid transparent;
border-top: 20px solid transparent;
border-bottom: 20px solid transparent;
margin-top: -20px;
}
.div .bottom{
position: absolute;
left: 50%;
top : 200px;
width: 0px;
height: 0px;
border-left: 20px solid transparent;
border-right: 20px solid transparent;
border-top: 20px solid blue;
border-bottom: 20px solid transparent;
margin-left: -20px;
}
</style>
</head>
<body>
<div class="div">
<div class="content"></div>
<div class="right"></div>
<div class="bottom"></div>
</div>
</body>
</html>
网友评论