思路:寫一個寬為0怯晕,高為0的盒子,設(shè)置邊框
我們發(fā)現(xiàn)有四個三角形憾儒,如果只是需要其中的一個三角,將其余三個的邊框設(shè)置成透明即可
div { width:0;height:0; border: 30px solid darkturquoise;border-top-color: green;border-bottom-color: red;}
image.png
div { width:0;height:0; border: 30px solid transparent;border-top-color: green;}
image.png
仿京東小三角:
html:
<div class="out">
<div class="in"></div>
</div>
css:
.out { width: 100px;height: 150px;background: green;position: relative;}
.in{ width:0;height:0; border: 10px solid transparent;border-top-color: green;position: absolute;bottom: -20px;left: 40px;}
image.png