02-利用border实现网站常见的三角形

来源：互联网发布：金林钣金放样软件编辑：程序博客网时间：2024/06/05 23:05

利用border实现网站常见的三角形

需求描述

我们经常在网站上见到hover三角形的效果，这个实现的其中一种方法就是利用伪标签：after和border属性实现的。

这里写图片描述

不比比直接上代码

<!DOCTYPE html><html lang="en"><head>    <meta charset="UTF-8">    <title>Title</title>    <style>        *{            margin:0px;            padding:0px;        }        #box{            width: 100px;            height: 40px;            position: relative;            border: 1px solid red;            margin: 100px auto;        }        #box:after{            content: "";            position: absolute;            top:15px;            right:-20px;            width: 0px;/*盒子的宽高为0*/            height: 0px;            border:5px solid red;/*给定border的样式*/            border-bottom:none;/*使底边框消失*/            border-left-color:transparent; /*左边框透明*/            border-right-color:transparent;/*右边框透明*/        }    </style></head><body>    <div id="box"></div></body></html>

效果图：
这里写图片描述

阅读全文

0 0

02-利用border实现网站常见的三角形

利用border实现网站常见的三角形

需求描述

不比比 直接上代码

不比比直接上代码