一、给div加border来实现
<div class="triangle"></div>
<style>
.triangle{
width: 0;
height: 0;
border-width: 40px;
border-style: solid dashed dashed dashed;
border-color: red transparent transparent transparent;
}
</style>
二、加 :after 伪类选择器制作三角形
<div class="triangle"></div><style>
.triangle{
position: relative;
width: 200px;
height: 100px;
background: blue;
}
.triangle::after{
position: absolute;
top: 100px;
left: 30px;
content: " ";
display: block;
width: 0;
height: 0;
border-width: 20px;
border-color: blue transparent transparent transparent;
border-style: solid dashed dashed dashed;
}
}
</style>
