时间：2023-09-16 19:36:01 | 来源：网站运营
时间：2023-09-16 19:36:01 来源：网站运营
CSS三角以及京东三角案例：按照HTML+CSS的学习顺序笔记已经更新了25篇内容了，因为篇幅问题，请看文末。今天来学CSS三角以及案例。
在线咨询
div { width: 0; height: 0; border: 50px solid transparent; border-color: red green blue black; line-height:0; font-size: 0; }<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <title>CSS 三角制作</title> <style> .box1 { width: 0; height: 0; /* border: 10px solid pink; */ border-top: 10px solid pink; border-right: 10px solid red; border-bottom: 10px solid blue; border-left: 10px solid green; } .box2 { width: 0; height: 0; border: 50px solid transparent; border-left-color: pink; margin: 100px auto; } .jd { position: relative; width: 120px; height: 249px; background-color: pink; } .jd span { position: absolute; right: 15px; top: -10px; width: 0; height: 0; /* 为了照顾兼容性 */ line-height: 0; font-size: 0; border: 5px solid transparent; border-bottom-color: pink; } </style></head><body> <div class="box1"></div> <div class="box2"></div> <div class="jd"> <span></span> </div></body></html>关键词：三角
