制作实心的三角形
<diva id="demo"></div>
#demo{ 100px; height: 100px; background-color: #333; position: relative; } #demo:after{ border:solid transparent; border-left-color:#333; border-10px; 0; content:" "; position:absolute; left:100%; top:10%; }
制作空心的三角型
<diva id="demo"></div>
#demo{ 100px; height: 100px; background-color:#fff; position:relative; border: 2px solid #000; /*整体颜色边框是黑色*/ } /*小三角*/ #demo:after{ border:solid transparent; border-left-color:#fff; border-10px; content:" "; position:absolute; left:100%; top:20px; /*20px*/ } /*大三角*/ #demo:before{ border:solid transparent; border-left-color:#000; border-12px; /*10px+2px*/ content:" "; position:absolute; left:100%; top:18px; /*20px-2px*/ }