纯css制作三角形+常用的对话框实例

最新推荐文章于 2023-03-07 16:33:12 发布
最新推荐文章于 2023-03-07 16:33:12 发布
阅读量5.4k 收藏 3
点赞数
分类专栏： css技巧 文章标签： html css 三角形
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/p493794782/article/details/72818308
版权

网页中经常用到三角形的地方，用css写三角形的方法很简单

html：

<span class="u-tri"></span>
css: 

 .u-tri{
          display: inline-block;
          border-top: 20px solid transparent;
          border-bottom: 20px solid transparent;
          border-left: 20px solid transparent;
          border-right: 20px solid red;
      }
效果图：



想要三角形的尖角方向朝哪边，对应的相反一边设置颜色。比如尖角向上，则boder-bottom的color上色，其它三边为透明。

实例：对话框背景

先上最后的效果图：


完整代码：

<!doctype html>
<html lang="en">
<head>
最低0.47元/天 解锁文章
大力酱
关注
  • 0
    点赞
  • 踩
  • 3
    收藏
    觉得还不错? 一键收藏
  • 1
    评论
专栏目录
用css实现对话框
weixin_44379204的博客
09-17 1394
一、实心正角对话框 1、clip-path实现方式 <div class="disflex"> <div class="dialog top"></div> <div class="dialog right"></div> <div class="dialog bottom"></div> <div class="dialog left"></div> </di
【css案例】聊天框
最新发布
xtcbql的博客
10-24 1072
【代码】【css案例】聊天框。
css实现气泡对话框
yuqu1028的博客
05-30 3629
实现气泡聊天框 我介绍两个方法： 第一种：利用旋转，首先设置一个小正方形利用transform属性将其旋转45度，当我们把一个长方形方框和旋转后的小正方形置于一起就可以都得到理想效果 效果图如下: 如上图所示，露出来的三角只是小正方形的一角 代码实现如下： #father{ width: 50px; height: 20px; text-align: center; line-heig
CSS如何实现一个对话框
WanDerEr950921的博客
10-26 1451
CSS如何实现一个对话框 步骤： 1.三角形的实现： 效果图如下： 初始效果的源代码： <head> <meta charset="utf-8" /> <meta http-equiv="X-UA-Compatible" content="ie=edge" /> <title> perfect*</title&gt...
CSS样式记录
黄钢的博客
03-07 2905
记录一些个人遇到的花了很久才解决的CSS样式问题，长期更新。
用CSS制作三角形和按钮的简单实例
09-24
下面小编就为大家带来一篇用CSS制作三角形和按钮的简单实例。小编觉得挺不错的，现在就分享给大家，也给大家做个参考。一起跟随小编过来看看吧
CSS3制作气泡对话框的实例教程
12-30
创建一个100%CSS的气泡，我们从下面的标记考试。 XML/HTML Code复制内容到剪贴板 <div u00a0class=speech-bubble>Hi there!  接下来，应用一些基本样式。 CSS Code复制内容到剪贴板 .speech-bubble { ...
使用CSS实现小三角形效果【附实例】
01-19
使用CSS实现小三角形效果【附实例】: 建议:尽可能的手写代码，可以有效的提高学习效率和深度。 在众多的网页效果中，都有小三角形效果的应用，能够增加特定应用的美观度，下面就给出一段实例代码，里面介绍了两种...
css-左三角
qq_41670147的博客
10-31 848
<!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-...
用CSS伪类选择器实现聊天对话框小三角效果
zlh241156的博客
10-08 1000
一个div用::before和::after两个伪类选择器实现聊天对话框小三角效果
css3实现气泡对话框
06-24
css3实现气泡对话框 http://blog.csdn.net/yangnianbing110/article/details/9154707
用css写一个对话框样式的框框
BubbleABC的博客
11-30 1097
写一个带三角的对话框 下面就直接上图上代码喽~ 下面的 就只是静态页面喽！ 用了两种方法 其实我觉得都一样啦~ 第二种方法比较简单啦 只用写一个class="cont"的div就OK了~（我用的就是第二种方法） 由于下面我的例子里没有数据 你们的div 给一个宽高喽 不然 效果不出来就不怪我喽~ html部分 <div class="more_content"> <div class="sjx"></div> <div class="cont">&lt
CSS实现带三角的对话框
XreqcxoKiss的博客
03-22 2166
CSS实现带三角的对话框即对话气泡框 作者：爱编程的小金毛球球 日期：2020年3月22日 话不多说，上图展示： 首先，肯定是要先添加一个框了 HTML <div class = "div"></div> CSS .div{ border: 2px blue solid; width: 200px; height: 100px; } 这样就会得到一个框，如...
css带三角形的对话框
weixin_34380296的博客
05-09 278
原理：before伪元素创建个小正方形，旋转45度角。颜色使用inherit。这样更改颜色的话只需要更改一处就行了。 <style type="text/css"> html,body{ padding: 0; margin:0; } .box{ width: 20rem; height: 8rem; border-radius: 1rem; border...
div+css做出带三角的弹出框
webnoob
06-24 6432
notice：三角的那部分可以用图片作为背景，但是容易出现杂边。所以利用css中border做出三角形状，原理是用border的形状如下：当我们设置content的宽高为0时，可想而知会出现什么效果，如下：然后把不保留的其他boder设置颜色为透明transparent就行了。具体代码如下：&lt;!DOCTYPE html&gt; &lt;html lang="en"&gt; &lt;head&...
CSS 实现三角形对话框
小菜鸟正洋洋的博客
01-11 1651
<div style="width:0; height:0; border-width:30px; border-style:solid; border-color:transparent transparent #000 transparent; position: absolute;top: -60px;left: 100px; "> <em style="di
css实现聊天气泡对话框
热门推荐
qq_33239420的博客
05-31 1万+
方法1:实现这种扁平化的气泡对话框只需用行内块元素+伪类做小三角即可 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> </head> <body style="backgroun...
用纯CSS实现一个带三角的正方形 仅用一个div
hahahahahahahaha__1的博客
06-02 4968
要求：正方形边长100px，背景颜色白色，边框颜色#0cc，三角形为等腰直角三角形底20px，高10px，距正方形上部20px,边框宽度为2px。CSS样式：/*正方形样式*/    #demo{      width:96px;      height: 96px;      border:2px solid #0cc;      background-color: #fff;      pos...
CSS实现聊天气泡（三角形）
换日线的博客
04-21 3353
左边聊天气泡 /* CSS */ .frame{ width: 100%; float: left; position: relative; padding: 0 0 0 5px; } .triangle{ width:0; height:0; border-top:5px solid transparent; border-bottom:5px soli...
css空心三角形_纯CSS+HTML制作三角形和圆|实心+空心
06-03
您好！关于制作纯CSS的空心三角形和圆，可以参考以下代码示例： 空心三角形： ``` <div class="triangle"></div> <style> .triangle { width: 0; height: 0; border-top: 50px solid transparent; border-bottom: 50px solid transparent; border-left: 50px solid #000; } </style> ``` 实心三角形： ``` <div class="triangle"></div> <style> .triangle { width: 0; height: 0; border-top: 50px solid #000; border-right: 50px solid transparent; border-left: 50px solid transparent; } </style> ``` 空心圆： ``` <div class="circle"></div> <style> .circle { width: 50px; height: 50px; border: 2px solid #000; border-radius: 50%; } </style> ``` 实心圆： ``` <div class="circle"></div> <style> .circle { width: 50px; height: 50px; background-color: #000; border-radius: 50%; } </style> ``` 希望对您有帮助！

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

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

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值