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

比眉伴天荒 2021-09-14 03:38 178阅读 0赞

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

需求描述

  1. 我们经常在网站上见到hover三角形的效果,这个实现的其中一种方法就是利用伪标签:afterborder属性实现的。

这里写图片描述


不比比 直接上代码

  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4. <meta charset="UTF-8">
  5. <title>Title</title>
  6. <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>
  7. </head>
  8. <body>
  9. <div id="box"></div>
  10. </body>
  11. </html>

效果图:
这里写图片描述

发表评论

表情:
评论列表 (有 0 条评论,178人围观)

还没有评论,来说两句吧...

相关阅读