CSS三角

最新推荐文章于 2022-08-20 16:42:17 发布

boboluotou

最新推荐文章于 2022-08-20 16:42:17 发布

阅读量133

点赞数

分类专栏： CSS 前端

本文链接：https://blog.csdn.net/weixin_45798469/article/details/109134963

版权

前端同时被 2 个专栏收录

31 篇文章 0 订阅

订阅专栏

CSS

18 篇文章 0 订阅

订阅专栏

1 CSS三角

三角大小由盒子边框大小决定。

在这里插入图片描述

2 设置一个角

只需设置盒子边框为透明，设置其中一个方向为所需颜色。
在这里插入图片描述

3 京东案例

需要一个大盒子和一个向上的三角。
在这里插入图片描述

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>CSS三角</title>
    <style>
        /*子绝父相*/
        .box{
            position: relative;
            width: 300px;
            height: 300px;
            background-color: pink;
            margin: 100px auto;
        }
        .box2{
            position: absolute;
            right: 15px;
            /*top值 盒子边框的2倍*/
            top:-40px;
            width: 0px;
            height: 0px;
            /*为了照顾兼容性*/
            line-height: 0;
            font-size: 0;

            border: 20px solid transparent;
            border-bottom: 20px solid pink;
            /*border-bottom-color: pink;*/
        }
    </style>
</head>
<body>
    <div class="box">
        <span class="box2"></span>
    </div>

</body>
</html>

boboluotou

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
CSS三角

目录1 CSS三角2 设置一个角3 京东案例1 CSS三角三角大小由盒子边框大小决定。2 设置一个角只需设置盒子边框为透明，设置其中一个方向为所需颜色。3 京东案例需要一个大盒子和一个向上的三角。<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>CSS三角</title> <style&gt
复制链接

扫一扫

专栏目录