仿京东三角效果案例

最新推荐文章于 2024-07-12 20:49:16 发布

奶盖不加糖

最新推荐文章于 2024-07-12 20:49:16 发布

阅读量234

点赞数

文章标签： html html5 css3 css

本文链接：https://blog.csdn.net/qq_44156869/article/details/113936024

版权

CSS 专栏收录该内容

27 篇文章 1 订阅

订阅专栏

下面的效果是如何实现的呢？
在这里插入图片描述
案例：

<head>
    <style>
        div {
            /*相对定位*/
            position: relative;
            width: 200px;
            height: 100px;
            background-color: pink;
            margin: 100px auto;
        }

        p {
            /*绝对定位*/
            position: absolute;
            /* 绝对定位/固定定位的盒子不能通过设置 margin:auto 设置水平居中 */
            /*小算法：
            让固定定位的盒子 left : 50%，走到浏览器可视区（也可以看作版心）的一半位置。
            让固定定位盒子 marfin-left : 版心宽度的一半距离，
            因为多走版心宽度的一半位置，
            就可以让固定定位的盒子贴着版心右侧对齐了。
            
            大白话：left 50% 走父亲宽度的一半,margin-left 左走自己宽度的一半 ,一定注意是负值。
              */
              /* 背景图像定位：left 整数向右，top整数向下 */
            top: -40px;
            left: 50%;
            margin-left: -20px;
            /*盒子宽高为0*/
            width: 0;
            height: 0;
            /*边框为实线*/
            border-style: solid;
            /*边框的宽为20px*/
            border-width: 20px;
            /*边框的颜色*/
            border-color: transparent transparent pink transparent;
            font-size: 0;
            /*行高一定要去掉，不然对不准*/
            line-height: 0;
        }
    </style>
</head>

<body>
    <div>
        <p></p>
    </div>
</body>

在这里插入图片描述

小提示：背景图像定位：left 整数向右，top整数向下，和数学中x,y轴的值不一样。

在这里插入图片描述

奶盖不加糖

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
仿京东三角效果案例

下面的效果是如何实现的呢？案例：<head> <style> div { /*相对定位*/ position: relative; width: 200px; height: 100px; background-color: pink; margin: 100px auto; }
复制链接

扫一扫