CSS-边距2-实现一个三角形
程序员文章站
2022-07-04 09:06:23
...
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运行效果
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>
下一篇: 判断一个点是否在在三角形和矩形
推荐阅读