上三角:
.up {
width: 0;height: 0; border-left: 50px solid transparent; border-right: 50px solid transparent; border-bottom: 100px solid #000; }
<div class="up"></div>
下三角:
.down { width: 0;height: 0; border-left: 50px solid transparent; border-right: 50px solid transparent; border-top: 100px solid #000; } <div class="down"></div>
左三角:
.left { width: 0;height: 0; border-top: 50px solid transparent; border-right: 100px solid #000; border-bottom: 50px solid transparent; } <div class="left"></div>
右三角:
.right { width: 0;height: 0; border-top: 50px solid transparent; border-left: 100px solid #000; border-bottom: 50px solid transparent; } <div class="right"></div>
左上:
.topLeft { width: 0;height: 0; border-top: 100px solid #000; border-right: 100px solid transparent; } <div class="topLeft"></div>
右上:
.topRight { width: 0;height: 0; border-top: 100px solid #000; border-left: 100px solid transparent; } <div class="topRight"></div>
左下:
.bottomLeft { width: 0;height: 0; border-bottom: 100px solid #000; border-right: 100px solid transparent; } <div class="bottomLeft"></div>
右下:
.bottomRight { width: 0;height: 0; border-bottom: 100px solid #000; border-left: 100px solid transparent; } <div class="bottomRight"></div>
时间: 2024-10-21 10:39:43