CSS3实现三角形和对话框

这是最终实现的效果,类似于微信对话框的样式。

分析一下这个对话框的结构,由一个小三角形和一个长方形构成。长方形很容易就可以实现,重点是如何用CSS3做出一个小三角形。

一、如何生成一个三角形

 总结:三角形是由设置宽度高度为0,由边框构成的正方形,分别设置边框四个边的样式,得到四个三角形拼凑在一起的效果,再设置其他方向上的边框颜色为透明色。

1、首先先做一个正方形,这个正方形不是一般的元素加上背景颜色实现的,而是对一个元素将其长和宽都设置0px,这样就相当于盒子的内容区消失。content:" ";

.box{
        border:50px solid #aff;
        width: 0px;height:0px;
        margin:50px auto;
    }

 2、然后再单独设置每一条边框的样式,就可以看到出现了四个三角形拼凑在一起的效果。

.box{
        border-top:100px solid #aff;
        border-left:100px solid #faf;
        border-right:100px solid #afa;
        border-bottom:100px solid #ffa;
        width: 0px;height:0px;margin:50px auto;
    }

3、获得单个的三角形,取一半边框,其他边框的颜色设置为透明 transparent

这样就获得了一个三角形。

二、制作一个对话框

对话框设置圆角border-radius;文字距离边框还有一定距离所以要设置内边距 padding;文本内容垂直居中line-height;

::before伪元素在元素前面添加内容;

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title></title>
    <style>
    .main{
        background-color: #6a6;
        margin:50px auto;padding:16px;
        width:200px;height:25px;
        border-radius: 10px;line-height: 25px;
        position: relative;
    }
    .main::before{
        content:" ";
        border-left: 0px solid #6a6;
        border-top:10px solid transparent;
        border-right:10px solid #6a6;
        border-bottom:10px solid transparent;
        position: absolute;left:-10px;top:18px;
    }
    /*::before伪元素在元素前面添加内容;*/
    </style>
</head>
<body>
    <div class="main">Hello World ! </div>
</body>
</html>

原文地址:https://www.cnblogs.com/nyw1983/p/11609449.html

时间: 2024-10-10 09:44:46

CSS3实现三角形和对话框的相关文章

css3画三角形的原理

以前用过css3画过下拉菜单里文字后面的“下拉三角符号”,类似于下面这张图片文字后面三角符号的效果 下面是一个很简单的向上的三角形代码 #triangle-up { width: 0; height: 0; border-left: 50px solid transparent; border-right: 50px solid transparent; border-bottom: 100px solid blue; } 再给相应的div加上对应的class,一个如下的三角形就用css画好了

转 css3画三角形的原理

转自  www.cnblogs.com/huangzhilong/p/5030659.html 下面是一个很简单的向上的三角形代码 #triangle-up { width: 0; height: 0; border-left: 50px solid transparent; border-right: 50px solid transparent; border-bottom: 100px solid blue; } 再给相应的div加上对应的class,一个如下的三角形就用css画好了 当时

利用 CSS3 构建一个气泡对话框

这是一篇CSS3教程 http://www.maiziedu.com/course/228/,主要讲述在不使用图片的情况下如何使用CSS3 创建图像效果. 使用渐进增强的开发方式,因此一开始的界面只要拥有基本样式即可.基本的评论区界面样式如下: 现在我们来逐步完善这个博客的评论区域. word-wrap 当用户在评论区留下一长串的 URL 时,有可能会出现以下情况. 此时需要使用 word-wrap,使用 word-wrap 的原因是基于 Webkit 内核的浏览器以及 IE 在遇到"/&quo

CSS3实现三角形

<div class="arrow-up"> <!--向上的三角--> </div> <div class="arrow-down"> <!--向下的三角--> </div> <div class="arrow-left"> <!--向左的三角--> </div> <div class="arrow-right"&

石头教你如何用纯CSS3绘制三角形、箭头。

经常在有些网站上看到一些三角图形,但通常这些都是图片,现在石头就教你如何用纯css3技术来绘制三角图形. 下面是具体步骤,把这些看一遍你也就懂得怎样来绘制三角形.箭头了. 1.新建一个元素,随便什么元素,不过我习惯性的会用块元素来做.如果行内元素就display:block它. <div class="box"></div> 2.把它的宽高设置为height:0px; width:0px; 3.设置边框border属性,用来实现三角形. 首先要了解border具

怎么利用CSS3绘制三角形

最近三角形挺火,很多地方都能碰到,如网页,微信,或者QQ空间的时间轴等地方都能看到,而且这些并不是图片插入进去的,那就需要用CSS来做了 <p class="bbb">111111111111</p> <br/> <div class="triangle-up"> <!--向上的三角--> </div> <br/> <div class="triangle-down&

css3画三角形

以下是用css3画3角形,效果如下图 <!doctype html> <html> <head> <meta charset="utf-8"> <title>无标题文档</title> <style> span{ display:inline-block; margin-right:10px} .triangle_top{height:0;width:0; border:10px solid; bord

css3 画三角形

/*箭头向下*/ .arrow-up { width:0; height:0; border-left:20px solid transparent; border-right:20px solid transparent; border-bottom:20px solid #000;} /*箭头向下*/.arrow-down { width:0; height:0; border-left:20px solid transparent; border-right:20px solid tran

使用CSS3制作三角形小图标

话不多说,直接写代码,希望能够对大家有所帮助! 1.html代码如下: <a href="#" class="usetohover"> <div class="triangle_border_right"></div> </a> <div class="ball"> <div class="triangle_border_up rotate-back&