1.通过边框书写三角形:
html部分:主要是设置两个盒子。
<body>
<div class="one"></div>
<div class="two"></div>
</body>
css部分:
.one{
width: 0;
height: 0;
border-top:100px solid transparent;
border-bottom: 100px solid transparent;
border-left: 100px solid blue;
border-right: 100px solid green;
}
.two{
width: 0;
height: 0;
border: 100px solid transparent;
border-bottom: 100px solid red;
}
css代码解析:
.one里面的样式给宽高为0,主要是让内容区为0;使方框只剩下边框,然后给边框添加厚度,其中给上下100px边框的厚度,但是方框的颜色为透明色,左右给100px边框厚度,颜色为蓝色和绿色。
.one的实现效果如下:
.two则是同时给四个方向边框厚度,然后给他透明色,,然后根据需要,给需要加的方向添加边框厚度和颜色就可以实现三角效果。
.two的实现效果如下:
2.透过旋转盒子,实现三角的效果(这种设置方式就可以给边框添加颜色):
html代码块部分:
<body>
<div class="one"></div>
<div class="two"></div>
</body>
css部分:
<style>
.one{
position: relative;
width: 150px;
height: 30px;
color: white;
border: 1px solid #47852b;
background-color: #67A54B;
border-radius: 5px 0 0 5px;
}
.two{
position: absolute;
left: 149px;
top: 13px;
width: 21px;
height: 21px;
background-color: #67A54B;
transform: rotate(135deg);
border-top: 1px solid red;
border-left: 1px solid #47852b;
}
</style>
css代码块解析:
.one里面主要是给它一个宽高和背景色(其中的color是给里面字体的颜色)给它一个像素的边框,。border-radius是给他的边框一个圆角效果,其中给的数值是左上和左下各五个像素的边框圆角效果。
.one的效果图:
这里面牵扯到绝对定位和相对定位知识(主要运用的知识就是子绝父相,如上面所写的,右侧的盒子是需要根据左侧的盒子进行位置的调整,所以右侧的盒子是左侧盒子的孩子,所以它是相对定位,左侧的盒子就是绝对定位。
.two里面也是给他宽高和背景颜色,将盒子进行旋转设置(默认情况是顺时针进行旋转),然后根据现在盒子的位置,将它调整到自己所需要的位置,如果需要对盒子进行边框的设置,也可以对边框的颜色进行设置。
.two的效果如下:
整体完成之后效果如下:
三角设置的方法基本以上面两种为主,后面的(::before或者::after)伪元素添加三角的方法基本以上面两种方法为基础进行设置,上面两种使用自然,就可以根据需要进行变化。