案例——京东三角+CSS三角形

最新推荐文章于 2022-12-19 17:51:21 发布

Yolanda-Candy

最新推荐文章于 2022-12-19 17:51:21 发布

阅读量219

点赞数

分类专栏：案例文章标签： css html

本文链接：https://blog.csdn.net/Sweat_candy/article/details/123955595

版权

本文通过案例详细介绍了如何使用CSS创建京东样式的三角形，并深入讲解了CSS三角形的生成原理，包括展示效果图、提供代码参考，帮助读者理解并实践这一技术。

摘要由CSDN通过智能技术生成

案例：京东三角

1.效果图

2.代码参考


<!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 tr