1.无边框三角形
条件:width,height设置为0,border-width设置一定的宽度,border-color保留一边有颜色其他三边设置透明
.triangle{
width:0px;
height:0px;
border-width:40px;
border-style: solid;
border-color: #FF7F24 transparent transparent transparent;
}
效果:
2.有边框三角形
由于我们写三角形的时候用到的就是border,所以给三角形添加边框就不能再用border属性了,我们就使用元素覆盖,设置大小不一样的边框,大的在下面,这就用到position:absolute,
//html
<div class="triangle-border">
<div class="triangle"></div>
</div>
//css
.triangle{
position:absolute;
left:0px;
top:0px;
width:0px;
height:0px;
border-width:40px;
border-style: solid;
border-color: #FF7F24 #EEC900 #E066FF #90EE90;;
}
.triangle-border{
position:relative;
width:0px;
height:0px;
border-width:42px;
border-style: solid;
border-color: #FF7F24 #EEC900 #E066FF #90EE90;;
}
效果如下:
绝对定位并没有覆盖到父元素上,因为我们的三角形是边,而不是真正的内容区域,绝对定位(position:absolute),是根据相对定位父层内容的边界计算的。由于父元素div内容为空,content的内容在中心,所以子元素是根据中心点来定位的,我们知道这个原理,微调下子元素的定位即可,然后把父元素的边框颜色设置为边框色
.triangle{
position:absolute;
left:-40px;//修改这行
top:-40px;//修改这行
width:0px;
height:0px;
border-width:40px;
border-style: solid;
border-color: #FF7F24 #EEC900 #E066FF #90EE90;
}
.triangle-border{
position:relative;
width:0px;
height:0px;
border-width:42px;
border-style: solid;
border-color: #333;//修改颜色
}
效果如下:
然后隐藏父元素,子元素其他三个边就可以
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>img</title>
<style>
html,body{
width: 100%;
height: 100%;
padding:0;
margin:0;
}
/*border-color: #FF7F24 #EEC900 #E066FF #90EE90;*/
.triangle{
position:absolute;
left:-40px;
top:-41px;
width:0px;
height:0px;
border-width:40px;
border-style: solid;
border-color: #FF7F24 transparent transparent transparent;
}
.triangle-border{
position:relative;
width:0px;
height:0px;
border-width:42px;
border-style: solid;
border-color: #333 transparent transparent transparent;
}
</style>
</head>
<body>
<div id="main">
<div class="triangle-border">
<div class="triangle"></div>
</div>
</div>
<script>
</script>
</body>
</html>