`

纯CSS 绘制三角形气泡框

    博客分类:
  • css
阅读更多

1.用纯css绘制带三角型的气泡框,不适合用图片

2.绘制的原理:当width和height均为0时,bord不为0时,边界交换处以45度角平分。

例子:先画一个三角吧

.dr{
 width:0px;
height:0px;
border:10px solid black;
border-bottom:10px solid red;
}
<div class=dr></div>

 结果:

 (1)当我们想要绘制朝上着上方的小三角,只要把黑色区域改为白色或透明即可。border:10px solid transparent 或:border:10px solid #fff

    (2)尖朝上的三角形 设置 border-bottom 所以朝左border-right 朝右 border-left 朝下 border-top

3.我们已经绘画了三角型,但是我们要的是三角形边框,改怎么做呢?

思路:外边是一个实的三角形,用上面的方法绘制,里面在做一个小三角形叠在里面,颜色是白色,比外面的三角形小一点点,这样不就留下框了么。

 <style>
     .content{
          width:0px;
          height:0px;
          border:10px solid black;
          border-bottom:10px solid red;
     }
    .inner{
          width:0px;
          height:0px;
          border:10px solid yellow;
          border-bottom:10px solid red;
    }
     </style>
</head>
<body>
        <div class="content">
             <div class="inner">
             </div>
        </div>
</body>

 


 4.经过大神的点播,利用:before和after 来实现这个更方便些

  <style>
     .content{
           width:0px;
           height:0px;
           border:10px solid transparent;
           border-bottom:10px solid red;
           margin-left:10px;
     }
    .content:after{
          content:"";
          display:block;
          width:0px;
          height:0px;
          border:10px solid transparent;
          border-bottom:10px solid white;
          position:relative;
          top:-9px;
          left:-10px;
     }
     </style>

 结果:

 
 

 

  • 大小: 1.6 KB
  • 大小: 3.5 KB
  • 大小: 1.4 KB
分享到:
评论

相关推荐

    纯CSS绘制三角形

    纯CSS写带边框的三角形

    纯CSS写带边框的三角形

    网页动画素材 纯css3绘制逼真神奇宝贝伊布动画(抖音资料)

    网页动画素材 纯css3绘制逼真神奇宝贝伊布动画(抖音资料)网页动画素材 纯css3绘制逼真神奇宝贝伊布动画(抖音资料)网页动画素材 纯css3绘制逼真神奇宝贝伊布动画(抖音资料)网页动画素材 纯css3绘制逼真神奇宝贝...

    用css画三角形

    用纯css绘制三角形,不是用图片

    纯CSS绘制三角形(各种角度)

    本文将详细介绍如何使用纯CSS绘制不同方向的三角形,并探讨其背后的原理。 #### 二、基础知识回顾 在开始之前,我们需要了解CSS中几个关键的概念: 1. **边框属性**:`border` 属性用于定义一个元素的四条边框。...

    用CSS代码绘制三角形 纯CSS绘制三角形的代码

    ### 使用CSS绘制三角形 #### 引言 随着前端技术的发展与创新,CSS不仅局限于网页布局与样式的美化,还能实现一些有趣的图形绘制功能。本文将详细介绍如何仅使用CSS来绘制一个三角形,并深入探讨其背后的原理和技术...

    纯CSS绘制三角形箭头图案技术解析

    纯CSS绘制三角形箭头图案是一种高效且灵活的方法,它避免了使用图像资源,从而提高了网页加载速度并简化了设计工作。这种方法利用了CSS边框的透明性质和边框宽度来创建形状。本文将深入探讨如何使用:before和:after...

    css3实现的各种气泡框

    用css3实现的气泡框,各种方向的箭头,还有各种样式的都有,代码内嵌在页面里面,不熟悉的可以用工具直接查看。

    css 聊天窗口 小箭头 气泡效果

    在本主题"css 聊天窗口 小箭头 气泡效果"中,我们将探讨如何使用纯CSS技术来创建具有小箭头和气泡效果的聊天窗口。这个效果通常用于模拟现实生活中对话气泡的视觉表现,使用户能够清晰地识别出消息的发送者和接收者...

    纯css三角提示框

    "纯css三角提示框"是一种完全使用CSS实现的提示框,它不依赖JavaScript,但可以实现动态效果,如自动定位和自定义弹出方向。这种技术在优化页面性能和减少代码复杂性方面具有优势,因为CSS比JavaScript更轻量级,且...

    纯CSS实现气泡提示.rar

    "纯CSS实现气泡提示"就是一个这样的设计,它模仿了Windows系统中的气泡提示功能,用于在网页上提供信息提示。这种提示通常用于告知用户某个元素的功能或者提供额外的上下文信息。以下是关于这个主题的详细知识点: ...

    css实现气泡框效果(实例加图解)

    【CSS实现气泡框效果详解】 在网页设计中,气泡框或提示框是一种常见的元素,用于显示消息、提示或指示。通常,这些效果可以通过多种方式实现,包括使用JavaScript框架。然而,为了深入理解并掌握这种效果,我们...

    纯CSS曲线图的代码演示

    在实际应用中,纯CSS曲线图可能不如JavaScript库如D3.js或Chart.js那样功能强大,但它们对于简单的数据展示或学习CSS技巧是非常有用的。了解如何用CSS创建曲线图可以增强你的前端技能,并在某些情况下提供更轻量级的...

    纯CSS3创意气泡动画特效.zip

    【标题】"纯CSS3创意气泡动画特效.zip"揭示了这个压缩包包含的资源是关于使用纯CSS3实现的一种创新、美观的气泡动画效果。CSS3是层叠样式表(Cascading Style Sheets)的第三版,它极大地扩展了CSS的功能,包括新的...

    纯CSS绘制星星评分特效.zip

    "纯CSS绘制星星评分特效"就是一个很好的例子,它展示了如何利用CSS(层叠样式表)这一强大的样式语言来创建交互式的、吸引人的评分系统,而无需依赖JavaScript或其他编程语言。下面我们将深入探讨这个主题。 首先,...

    纯CSS绘制三角形箭头效果

    纯CSS绘制三角形箭头是一种高效且灵活的方法,可以避免使用图像资源,简化网页设计,同时保持良好的浏览器兼容性。这种技术主要利用了CSS边框的特性来创建形状。以下将详细解释如何通过CSS实现不同方向的三角形箭头...

    纯CSS实现多彩三角形有序变化特效动画时尚背景墙.zip

    在本文中,我们将深入探讨如何使用纯CSS技术创建一个多彩三角形有序变化的特效动画背景墙,这是一种在现代网页设计中常用来增加视觉吸引力的方法。这个主题涉及到CSS3的多个重要特性,包括选择器、边框、渐变、动画...

    纯CSS3背景透明的Speech Bubbles对话气泡

    本案例中,我们关注的是"纯CSS3背景透明的Speech Bubbles对话气泡",这是一种在网页中实现对话或者提示信息展示的创新方式。 首先,了解什么是**CSS3 Speech Bubbles**。在网页设计中,对话气泡通常用于模拟人与人...

    css实现三角形.zip

    CSS三角形广泛应用于下拉菜单的箭头、提示气泡的指向符号、按钮的装饰元素等。 通过这个压缩包中的示例,你可以深入学习如何利用这些技术,并将它们应用到自己的网页设计中。通过实践和调试,你会更加熟练地掌握这...

Global site tag (gtag.js) - Google Analytics