资讯专栏INFORMATION COLUMN

css简单实现带箭头的边框

BlackFlagBin / 1312人阅读

原文地址 https://tianshengjie.cn/artic...
css简单实现带箭头的边框 普通边框

实现由四个三角形组成的正方形

向下三角形

将左右下边颜色设置为透明 transparent,得到向下的箭头

将三角形放入边框中

将三角形设置为绝对定位,利用margin-left和left 定位到元素中间,bottom设置-8px,靠近边框底部居中

带箭头的边框

将边框颜色换成好看的蓝色,将before和after伪元素都设置为绝对定位,定位到边框底部剧中,将after伪元素设置成白色,底部偏移量大于before 1px,遮住三角形底部的颜色。这样一个好看的箭头边框就实现了

文章版权归作者所有,未经允许请勿转载,若此文章存在违规行为,您可以联系管理员删除。

转载请注明本文地址:https://www.ucloud.cn/yun/116993.html

相关文章

  • css简单实现箭头边框

    原文地址 https://tianshengjie.cn/artic... css简单实现带箭头的边框 普通边框 .border { width: 100px; height: 50px; border: 1px solid red; } showImg(https://segmentfault.com/img/bVbhBts...

    lbool 评论0 收藏0
  • 从项目中学习HTML+CSS

    摘要:最近由于工作原因以及自己的懈怠,已经很久都没有更新过博客了。所以这次就根据具体的一个网页项目来梳理一下我这段时间学习这些东西的成果。最近由于工作原因以及自己的懈怠,已经很久都没有更新过博客了。通过这段时间,我发现坚持一件事情是真的很难,都说万事开头难,但是在放弃这件事上好像开头了后面就顺理成章的继续下去了。中间即使不怎么情愿也在努力的每周更新博客,但是自从9月份以来,第一次因为工作需要加班而...

    Lin_R 评论0 收藏0
  • CSS画一个阴影三角形示例代码

    摘要:思路怎么用画一个带阴影的三角形呢有童鞋说这还不简单吗网上有很多解决方案但其实大多都是实现不太完美的存在一些问题假设我们做一个向下的三角形箭头常见的方法大致有两种通过边框控制和设为透明设为预定的颜色即可通过旋转盒子方法一可以画三角形但是1. 思路 怎么用CSS3画一个带阴影的三角形呢 ? 有童鞋说, 这还不简单吗 网上有很多解决方案, 但其实大多都是实现不太完美的, 存在一些问题 假设我们做一...

    chunquedong 评论0 收藏0
  • CSS实现空心三角指示箭头

    摘要:开发中,三角形的日常应用,以三角形指示箭头最为常见,其用来实现非常简单,熟悉了之后相比于引入或是背景图片会是更好更灵活的选择。这样就实现三角形了。实心三角形箭头实心三角形的原理就是一个三角形绝对定位到主体元素边界处并连接起来。 web开发中,三角形的日常应用,以三角形指示箭头最为常见,其用CSS来实现非常简单,熟悉了之后相比于引入SVG或是背景图片会是更好更灵活的选择。 而三角箭头一般...

    makeFoxPlay 评论0 收藏0
  • CSS 无图片技术总结

    摘要:预览动态移动边框锯齿边框首先我们重复度的透明背景,可以得到下面的再加一个反角度的秀景背景完整的锯齿边框效果更多背景效果动态移动边框查看三角形从上面的图可以看出的各边框是三角形,如果只设置下边框就可以得到三角形了。 预览 showImg(https://segmentfault.com/img/remote/1460000006766693);动态移动边框showImg(https://...

    pekonchan 评论0 收藏0

发表评论

0条评论

最新活动
阅读需要支付1元查看
<