使用css制作带有三角形的分割线

是光の谢宣骞

已于 2022-04-03 12:19:40 修改

阅读量281

点赞数

分类专栏：前端demo 文章标签：前端 html

于 2022-04-03 12:19:16 首次发布

本文链接：https://blog.csdn.net/qq_45870740/article/details/123935251

版权

CSS 伪元素水平线边框定位

关键词由CSDN通过智能技术生成

前端demo 专栏收录该内容

13 篇文章 0 订阅

订阅专栏

效果图

在这里插入图片描述

代码

<!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>Document</title>
    <style>
        * {
            padding: 0;
            margin: 0;
        }

        body {
            width: 200px;
            margin: 200px auto;

        }
	//注意这里要设置定位是relative
        #hr {
            
            position: relative;
        }
		//主要是下面的css

        #hr::before {
            content: "";
            display: block;
            width: 0;
            height: 0;
            border: 6px solid transparent;
            border-left-color: #e8e8e8;
            position: absolute;
            bottom: -13px;
            right: 0px;
        }

        #hr::after {
            content: "";
            display: block;
            width: calc(100% - 10px);
            height: 2px;
            background-color: #e8e8e8;
            position: relative;
            top: 8px;
        }
    </style>
</head>

<body>
    <div id="hr"></div>
</body>

</html>