<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" /><meta http-equiv="X-UA-Compatible" content="IE=edge" /><meta name="viewport" content="width=device-width, initial-scale=1.0" /><title>CSS三角制作</title><style> .box1 { /* float: left; */ width: 0; height: 0; /* border: 10px solid pink; */ border-top: 10px solid red; border-right: 10px solid pink; border-bottom: 10px solid yellow; border-left: 10px solid black; } .box2 { /* float: left; */ margin: 100px auto; width: 0; height: 0; border: 100px solid transparent; border-left: 100px solid pink; } /* 京东的小三角成果 */ .jd { position: relative; width: 120px; height: 249px; background-color: pink; } .jd span { position: absolute; right: 10px; top: -10px; width: 0; height: 0; line-height: 0; font-size: 0; border: 5px solid transparent; border-bottom: 5px solid pink; } .xiaomi { position: relative; margin: 100px auto; width: 100px; height: 200px; background-color: pink; } .xiaomi span { position: absolute; top: 10px; right: -10px; width: 0; height: 0; line-height: 0; font-size: 0; border: 5px solid transparent; border-left: 5px solid pink; }</style></head>
<body>
<div class="box1"></div><div class="box2"></div><div class="jd"> <span></span></div><div class="xiaomi"> <span></span></div></body>
</html>