android 气泡尖角边框,如何使用CSS实现一个带尖角的气泡框？

今天的任务中遇上了一个气泡框，还有需要添加圆角和指向性尖角，所以打开百度默默学习了一波，此文仅供自己记录使用。

先来看看预览图

先写上盒子，上代码

HTML:

CSS:

.element{

width: 0;

height: 0;

border-top: 20px solid red;

border-right: 20px solid blue;

border-bottom: 20px solid #727171;

border-left: 20px solid palegoldenrod;

}

复制代码

实现效果如下：

具体的实现原理呢，一个盒子，作为一个块级元素，我们首先将它的宽和高都设置成0，再将边框的大小设置成20px，也就是形成了如上图这样的四等分三角形组成的一个正方形。

那我们要得到一个方向朝上的尖角，就必须让上，右，左的三角形“隐形”。透明属性可以帮助我们做到这一点，透明的背景欺骗了我们的眼睛~让我们以为他们消失了，实际上它们只是看不见了而已。

CSS:

.element{

width: 0;

height: 0;

border-top: 20px solid transparent;

border-right: 20px solid transparent;

border-bottom: 20px solid #727171;

border-left: 20px solid transparent;

}

复制代码

正所谓：假如生活欺骗了你，不要慌张，你也可以欺骗它O(∩_∩)O哈哈~

好了，不说废话，现在三角形已经出来了，如何“掏空”它变成透明的呢？这就是接下来我们要完成的工作了。

首先我们依然需要一个新的盒子。

HTML：

CSS:

.wrapper {

width: 300px;

height: 200px;

position: relative;

margin: 20px auto;

border: 2px solid #cccccc;

border-radius: 15px;

}

复制代码

实现效果如下：

然后我们需要为这个盒子添加上之前实现的三角形

bottom那个三角形与盒子颜色相同，其余的三角形选择“隐形”即可。这里可以使用伪元素::before 和 ::after来实现这个效果。这两个元素被默认为行内元素，所以需要更改它们的属性为块级元素,绝对定位。再添加一个小点的白色三角形遮盖上面的三角形，使其露出尖角边框。

代码奉上：

CSS:

.wrapper:before {

content: '';

width: 0;

height: 0;

border: 20px solid transparent;

border-bottom-color: #cccccc;

position: absolute;

top: 0;

right: 20%;

margin-top: -40px;

}

复制代码

然后再次添加after选择器，用它来形成一个白色的三角形，并按照之前的写法把它定位到上边框上去。

这里需要特别提醒一点，那就是这个白色的小三角形，要比之前的三角形更小一点，至于大小可以自己调整，出来的效果可以了就基本完成了。

CSS:

.wrapper:after {

content: "";

width: 0;

height: 0;

border: 18px solid transparent;

border-bottom-color: #FFFFFF;

position: absolute;

top: 0;

right: 21%;

margin-top: -36px;

}

复制代码

那么整体的效果就实现啦~做此记录，下次学习。嘻嘻，

android 气泡尖角边框,如何使用CSS实现一个带尖角的气泡框？相关推荐

[css] 请使用CSS画一个带锯齿形边框圆圈
[css] 请使用CSS画一个带锯齿形边框圆圈 @import 个人简介我是歌谣,欢迎和大家一起交流前后端知识.放弃很容易, 但坚持一定很酷.欢迎大家一起讨论主目录与歌谣一起通关前端面试题
用 CSS 画一个带阴影的三角形
1. 思路怎么用CSS画一个带阴影的三角形呢 ? 有童鞋说, 这还不简单吗网上有很多解决方案, 但其实大多都是实现不太完美的, 存在一些问题假设我们做一个向下的三角形箭头常见的方法大致有两种 ...
用HTML、CSS写一个酷炫的动态搜索框
用HTML.CSS写一个酷炫的动态搜索框可伸展的动态搜索框! 复制粘贴即可用! HTML部分: <!DOCTYPE html> <html lang="en"& ...
html边框有箭头,css简单实现带箭头的边框
css简单实现带箭头的边框普通边框 .border { width: 100px; height: 50px; border: 1px solid red; } 实现由四个三角形组成的正方形 .tr ...
html 带边框的梯形,css clip-path画带边框梯形多边形
css clip-path画带边框梯形多边形项目案例一(自适应梯形) 项目案例二(渐变色多边形) 项目案例一(自适应梯形) 如下梯形区域为模块的title信息,要求title文字个数变化时梯形区域随 ...
css加三角阴影,用CSS画一个带阴影的三角形的示例代码
1. 思路怎么用CSS3画一个带阴影的三角形呢 ? 有童鞋说, 这还不简单吗网上有很多解决方案, 但其实大多都是实现不太完美的, 存在一些问题假设我们做一个向下的三角形箭头常见的方法大致有两种 ...
html、css做一个带搜索图标的搜索框
html.css图像代替提交按钮做个搜索框图像形式的提交按钮与普通提交按钮在功能上基本相同,只是它用图像代替了默认的提交按钮,外形上更加美观.需要注意的是,必须为其定义src属性指定图像的url地 ...
android 筛选控件_Flutter学习六之实现一个带筛选的列表页面
上期实现了一个网络轮播图的效果,自定义了一个轮播图组件,继承自StatefulWidget,我们知道Flutter中并没有像Android中activity的概念.页面间的跳转是通过路由从一个全屏组件 ...
01.个人项目难点汇总2 css定制科技感缺角边框
01.CSS3实现缺角矩形,折角矩形以及缺角边框前言前几天偶然看到缺角矩形这个功能,脑袋中第一想法是,搞个绝对定位的伪元素,哪里需要挡哪里,或者找UI小哥聊聊天,忽然灵光一闪,想起之前翻过的< ...
css聊天气派,css如何实现小尖角聊天对话框带尖角的说话泡泡效果
css如何实现小尖角聊天对话框带尖角的说话泡泡效果发布时间:2021-03-20 09:44:20 来源:亿速云阅读:58 作者:小新这篇文章主要介绍了css如何实现小尖角聊天对话框带尖角的说话 ...

android 气泡尖角边框,如何使用CSS实现一个带尖角的气泡框？

android 气泡尖角边框,如何使用CSS实现一个带尖角的气泡框？相关推荐

最新文章

热门文章