纯CSS实现小三角提示信息

最新推荐文章于 2023-08-21 14:47:29 发布
最新推荐文章于 2023-08-21 14:47:29 发布
阅读量230 收藏
点赞数
分类专栏： CSS
原文链接：https://www.cnblogs.com/yingzi1028/p/6215526.html
版权

效果如下图

效果图

代码

<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8">
    <title></title>
    <style media="screen">
        .arrow_box {
            position: relative;
            border: 1px solid #c2e1f5;
            padding: 10px;
            width: 200px;
            height: 100px;
            border-radius: 6px;
            box-shadow: 0 1px 4px rgba(0, 0, 0, 0.3);
            margin: 50px;
            float: left;
        }

        .arrow_box:before,
        .arrow_box:after {
            position: absolute;
            display: block;
            width: 0;
            height: 0;
            border: solid transparent;
            pointer-events: none;
            content: "";
            border-color: rgba(136, 183, 213, 0);
        }

        .arrow_box.down:before {
            border-bottom-color: #c2e1f5;
            border-width: 12px;
            left: 49%;
            margin-left: -10px;
            bottom: 100%;
        }

        .arrow_box.down:after {
            border-bottom-color: #fff;
            border-width: 10px;
            left: 50%;
            margin-left: -10px;
            bottom: 100%;
        }

        .arrow_box.up:before {
            border-top-color: #c2e1f5;
            border-width: 12px;
            left: 49%;
            margin-left: -10px;
            top: 100%;
        }

        .arrow_box.up:after {
            border-top-color: #fff;
            border-width: 10px;
            left: 50%;
            margin-left: -10px;
            top: 100%;
        }

        .arrow_box.left:before {
            border-left-color: #c2e1f5;
            border-width: 13px;
            top: 38%;
            left: 100%;
        }

        .arrow_box.left:after {
            border-left-color: #fff;
            border-width: 10px;
            top: 41%;
            left: 100%;
        }

        .arrow_box.right:before {
            border-right-color: #c2e1f5;
            border-width: 13px;
            top: 38%;
            right: 100%;
        }

        .arrow_box.right:after {
            border-right-color: #fff;
            border-width: 10px;
            top: 41%;
            right: 100%;
        }
    </style>
</head>

<body>
    <div class="popovers-body">
        <div class="arrow_box down"></div>
        <div class="arrow_box up"></div>
        <div class="arrow_box left"></div>
        <div class="arrow_box right"></div>
    </div>
</body>

</html>

转载至https://www.cnblogs.com/yingzi1028/p/6215526.html和https://www.cnblogs.com/yeyinfu/p/7317149.html

ncj393437906
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
纯CSS实现的小三角
09-25
纯CSS实现的小三角，喜欢的朋友可以参考下。
html5中使用外链式为div标签设置属性
大数据-攻城狮
12-07 1333
Document div{ width: 300px; height: 300px; /* 背景色 */ background-color: red; /* 边框 border */ /* 边框的粗细 实线 边框颜色 */ border-top: 10px solid green; bo
CSS实现三角形的四种方法
m0_60237095的博客
04-11 3万+
css三角形的实现
【CSS】CSS实现三角形（一）
流萤梦的博客
08-20 3524
如何使用border和linear-gradient实现三角形
CSS制作小三角形
zl960320的博客
11-19 2433
之前学习的使用CSS制作小三角形，今天再看发现已经记不起来了，写个笔记记录一下，方便以后查看~ 首先先回顾一个正方形,只要我们设置好宽高，就可以得到，代码如下： div{ width:100px; height:100px; border:1px solid #000; background-color:red; } 这时我们就得到了一个非常简单的正方形。但是如果想画出一个三角形，代码该怎么写呢？ 其次我们可以这样来思考一下 如果我们将正方形的宽高设置为0，那么这个形状就会消失，在没有宽高的情况
CSS：N种使用CSS 绘制三角形的方法
热门推荐
Yummy的博客
04-13 3万+
目录 6种使用 CSS 实现三角形的技巧 1、使用 border 绘制三角形 2、使用 linear-gradient 绘制三角形 3、使用 conic-gradient 绘制三角形 4、transform: rotate 配合 overflow: hidden 绘制三角形 5、使用 clip-path 绘制三角形 6、利用字符绘制三角形 6种使用 CSS 实现三角形的技巧 1、使用 border 绘制三角形 使用 border 实现三角形应该是大部分人都掌握的，也是各种面经中经常出现的
使用CSS实现小三角形效果【附实例】
09-24
下面小编就为大家带来一篇使用CSS实现小三角形效果【附实例】。小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧
div+css实现的小三角tip小提示(原理及代码)
09-25
小三角tip小提示想必大家并不陌生吧，只为提高用户体验而生，下面有个不错的示例，并给出详细的实现原理，感兴趣的朋友可以参考下
纯CSS实现页面的尖角、小三角、不同方向尖角的方法小结
09-24
本文通过三种方法给大家介绍了基于css实现的页面的尖角、小三角、不同方向尖角效果，代码简单易懂，非常不错，具有参考借鉴价值，需要的朋友参考下吧,需要的朋友可以参考下
css实现六角星
qq_39039128的博客
09-23 1231
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-U...
css实现三角形的几种方法
最新发布
忧郁的蛋的专栏
08-21 4711
css实现三角形的方法：1、使用边框实现三角形，利用透明边框和实色边框的组合，可以创建不同方向和大小的三角形；2、使用伪元素实现三角形，通过使用伪元素来创建一个占据父元素一半大小的实心三角形；4、使用clip-path属性实现三角形，通过定义多个点的坐标可以创建不同形状的三角形。这种方法通过设置元素的边框来实现三角形，利用透明边框和实色边框的组合，可以创建不同方向和大小的三角形。这种方法通过使用clip-path属性来裁剪元素的形状，通过定义多个点的坐标可以创建不同形状的三角形。
玩转CSS小三角
若水弹丸之地
09-03 1429
border边框语法： border 四条边框设置 border-left 设置左边框，一般单独设置左边框样式使用 border-right 设置右边框，一般单独设置右边框样式使用 border-top 设置上边框，一般单独设置上边框样式使用 border-bottom 设置下边框，一般单独设置下边框样式使用,有时可将下边框样式作为CSS下划线效果应用 一、先玩玩 1、首先让di...
CSS如何实现小三角
qq_54598875的博客
04-01 2022
CSS中快速实现小三角
css实现三角提示框
六碗铁biu_ 的博客
08-23 1379
一、创建不带边框的提示框： 之前已介绍过怎么生成三角形，直接代码如下： <style> body{ margin:0; padding:0; background:grey; } /*提示框容器*/ .tip{ position:relative; margin-left:20px; margin-top:20px; wi...
用css实现一个弹出框（类似element的Popover ）
weixin_38992765的博客
09-20 1984
实现的效果 点击按钮弹窗子组件（采用vue的fade-in动画） 点击其他地方弹窗消失 tab选中效果 先上效果图 父页面 <transition name="fade"> <div v-if="locationvisible"> <locationDialog class="locationDialog"></locationDialog> </div> </transition&gt
CSS实现小三角
qq_40574071的博客
07-19 3927
原理 盒子宽高为0，单独设置border宽度，然后上右下左，根据需要选择三角形的方向，比如选向上箭头，其他右下左方向设置为transparent。 .down{ width:0; height:0; overflow:hidden; font-size:0; line-height:0; border-width:10px; borde...
纯CSS写三角形-border法
weixin_34270865的博客
07-04 1536
(1)有边框的三角形 我们来写下带边框的三角形。 如果是一个正方形，我们写边时，会用到border，但我们这里讨论的三角形本身就是border，不可能再给border添加border属性，所以我们需要用到其他办法。 最容易想到的，是叠加层。思路是将两个三角形叠加在一起，外层三角形稍大一些，颜色设置成边框所需的颜色；内层三角形绝对定位在里面。整体就能形成带边框三角形的假象。 这里就涉及到...
cssTriangle：纯CSS实现带三角形的提示框
豪杰创想
08-25 1091
入门 使用纯css创建的带有三角形的提示框，可用于展示状态信息等。 引入 创建 cssTriangle.css 文件 /*如需自定义样式，可修改这里的代码*/ :root { /*背景颜色*/ --cssTriangle-background: #4fb16f; } /*核心：整体样式(清除浮动)*/ .cssTriangle { zoom: 1; } /*核心：整体样式(清除浮动)*/ .cssTriangle:after { content:""; dis..
【css】画提示框三角形
qq_43095183的博客
11-17 243
css画提示框三角形
纯CSS打造Bubble气泡提示框实现代码
05-30
可以参考以下代码实现纯CSS打造Bubble气泡提示框： HTML部分： ``` 这是一个Bubble气泡提示框 <div class="arrow"></div> ``` CSS部分： ``` .bubble-container { position: relative; width: 200...

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值