`

纯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绘制三角形

    纯CSS写带边框的三角形

    纯CSS写带边框的三角形

    用css画三角形

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

    纯CSS打造三角形

    还在为网页太多图片加载太慢而发愁吗?纯CSS打造三角形,不需要用图片了!

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

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

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

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

    纯css绘制几何图形

    本文将深入探讨如何使用纯CSS绘制各种几何图形,包括三角形、圆形(半圆、1/4圆)以及多边形(平行四边形、梯形、五边形、六边形、八边形)。 首先,让我们从最简单的形状——三角形开始。在CSS中,我们不能直接...

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

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

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

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

    纯CSS实现气泡提示.rar

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

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

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

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

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

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

    在“纯CSS绘制星星评分特效”这个项目中,你将看到如何将这些概念结合起来,创建一个功能完备且视觉效果出色的星星评分系统。文件中的代码应该包含HTML结构、CSS样式以及可能的JavaScript辅助代码。通过学习和理解这...

    纯CSS3悬停气泡按钮动画特效.zip

    【纯CSS3悬停气泡按钮动画特效】是一种利用CSS3技术实现的交互式设计,主要应用于网页中的按钮元素。这种特效在用户鼠标悬停在按钮上时,会触发一个气泡状的信息提示框,向用户展示附加信息或提示,为用户界面增添...

    纯CSS绘制三角形箭头效果

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

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

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

    纯CSS绘制电池充电水波纹动效(uni-app|view组件版)

    【纯CSS绘制电池充电水波纹动效(uni-app|view组件版)】 在这个项目中,我们探讨的是如何使用纯CSS技术来实现一个逼真的电池充电时的水波纹动效,尤其适用于uni-app框架下的vue.js应用。通过CSS3的新特性,我们可以...

    纯CSS3实现多种箭头绘制及动画.rar_css 绘制 动画_css3箭头动画_cupipo_箭头 动画 css_纯CSS3实现

    在给定的资源“纯CSS3实现多种箭头绘制及动画.rar”中,我们聚焦于如何利用CSS3的特性来创建各种箭头图形,并实现动态效果。 首先,CSS3中的边框属性(border)是实现箭头的基础。通过巧妙地组合边框宽度、颜色和...

Global site tag (gtag.js) - Google Analytics