【CSS】CSS实现三角形（二）

在上一篇文章：

提到了两种方式实现了三角形：

border边框
linear-gradient渐变

本文将通过第三种方式：使用伪元素的来实现气泡三角形。

1、实心气泡

其实，严格来说，是通过 border+伪元素 实现的，具体的可以参考以下代码：

/* 气泡三角 */
.triangle {width: 100px;height: 50px;background: #abc88b;border-radius: 5px;position: relative;
}
/* 上 */
.triangle1:before {content: "";width: 0px;height: 0px;border-bottom: 8px solid #abc88b;border-left: 10px solid transparent;border-right: 10px solid transparent;position: absolute;top: -8px;left: 40px;
}
/* 下 */
.triangle2:before {content: "";width: 0px;height: 0px;border-top: 10px solid #abc88b;border-left: 10px solid transparent;border-right: 10px solid transparent;position: absolute;bottom: -10px;left: 40px;
}
/* 左 */
.triangle3:before {content: "";width: 0px;height: 0px;border-right: 10px solid #abc88b;border-top: 10px solid transparent;border-bottom: 10px solid transparent;position: absolute;top: 15px;left: -10px;
}
/* 右 */
.triangle4:before {content: "";width: 0px;height: 0px;border-left: 10px solid #abc88b;border-top: 10px solid transparent;border-bottom: 10px solid transparent;position: absolute;top: 15px;right: -10px;
}

效果图如下：

有没有觉得很眼熟，这不就跟border直接实现差不多吗？不过是换了一种写法而已。

相比于直接使用border，使用伪元素不需要额外再去创建一个div，在一个div上就可以搞定。

2、空心气泡

实现了实心气泡之后，如果想要空心的要怎么搞呢？

首先，肯定得把背景色去了加一个border；

border: 1px solid #abc88b;

其次，我需要一个三角形覆盖住我的实心小三角。

那我前面加了一个伪元素before，我可以再加一个after嘛，after是一个白色小三角，只需要比有颜色的三角形小一个px就可以解决啦。

完整的代码如下：

.triangle {width: 100px;height: 50px;border: 1px solid #abc88b;border-radius: 5px;position: relative;
}
/* 上 */
.triangle1:before {content: "";width: 0px;height: 0px;border-bottom: 8px solid #abc88b;border-left: 10px solid transparent;border-right: 10px solid transparent;position: absolute;top: -8px;left: 40px;
}
.triangle1:after {content: "";width: 0px;height: 0px;border-bottom: 7px solid #ffffff;border-left: 9px solid transparent;border-right: 9px solid transparent;position: absolute;top: -7px;left: 41px;
}
/* 下 */
.triangle2:before {content: "";width: 0px;height: 0px;border-top: 10px solid #abc88b;border-left: 10px solid transparent;border-right: 10px solid transparent;position: absolute;bottom: -10px;left: 40px;
}
.triangle2:after {content: "";width: 0px;height: 0px;border-top: 9px solid #ffffff;border-left: 9px solid transparent;border-right: 9px solid transparent;position: absolute;bottom: -9px;left: 41px;
}
/* 左 */
.triangle3:before {content: "";width: 0px;height: 0px;border-right: 10px solid #abc88b;border-top: 10px solid transparent;border-bottom: 10px solid transparent;position: absolute;top: 15px;left: -10px;
}
.triangle3:after {content: "";width: 0px;height: 0px;border-right: 9px solid #ffffff;border-top: 9px solid transparent;border-bottom: 9px solid transparent;position: absolute;top: 16px;left: -9px;
}
/* 右 */
.triangle4:before {content: "";width: 0px;height: 0px;border-left: 10px solid #abc88b;border-top: 10px solid transparent;border-bottom: 10px solid transparent;position: absolute;top: 15px;right: -10px;
}
.triangle4:after {content: "";width: 0px;height: 0px;border-left: 9px solid #ffffff;border-top: 9px solid transparent;border-bottom: 9px solid transparent;position: absolute;top: 16px;right: -9px;
}

效果图如下：

OK，掌握了这几种方法之后，实现三角形应该是问题不大了，后续会补充其他方式哦！

【CSS】CSS实现三角形（二）相关推荐

如何用css绘制一个三角形？
一.前言通常我们在开发过程中,像一些播放器的暂停按钮.或者是一些下拉框等等,都会用到三角形. 一般我们会使用一些svg或者是icon图标来替代,那么有没有想过该怎么去绘制一个三角形呢? 废话不多说 ...
[css] 用css创建一个三角形，并简述原理
[css] 用css创建一个三角形,并简述原理 width: 0;height: 0;margin: 100px auto;border-top: 50px solid transparent;bor ...
[css] 用CSS绘制一个三角形
[css] 用CSS绘制一个三角形 .triangle{width: 0;border-bottom: 35px solid lightgreen;border-left: 35px solid tr ...
html5 css 三角形,css怎么画三角形？
css怎么画三角形?下面本篇文章就来给大家介绍一下使用CSS画三角形的方法.有一定的参考价值,有需要的朋友可以参考一下,希望对大家有所帮助. css怎么画三角形? 三角形实现原理:宽度width为0: ...
html div三角形,css+div打造三角形(箭头)
在很多网站都见过这样的箭头 ,之前我一直以为是图片,直到今天才知道原来可以用css做.开始看代码没太看懂,后来自己试了几遍才恍然大悟.贴出来分享下.(大神请直接忽略) 先看代码: HTML部分就是一个 ...
玩转CSS盒子之三角形盒子
玩转CSS盒子之三角形盒子 CSDN用户名:jcLee95 邮箱:291148484@163.com 本文地址:https://blog.csdn.net/qq_28550263/article/d ...
css空心三角形_纯CSS制作空心三角形和实心三角形及其实现原理
纯CSS制作空心三角形和实心三角形及其实现原理在一次项目中需要使用到空心三角形,我瞬间懵逼了.查阅了一些资料加上自己的分析思考,终于是达到了效果,个人感觉制作三角形是使用频率很高的,因此记录下来,供 ...
CSS基础班笔记(二)
web前端剑法之css ??web前端剑法之css 地址 ??CSS基础班笔记(一) https://blog.csdn.net/Augenstern_QXL/article/details/1155 ...
CSS 笔记（十二）：预处理器 —— Less
CSS 笔记(十二):预处理器 -- Less 什么是 CSS 预处理器 CSS 预处理器就是使用某一种语言为 CSS 增加一些动态语言的特性,使用 CSS 预处理器可以使 CSS 具有简洁,适应性强 ...
使用CSS画一个三角形
效果图全部代码 <!DOCTYPE html> <html> <head><title></title><style type=&q ...

【CSS】CSS实现三角形（二）

1、实心气泡

2、空心气泡

【CSS】CSS实现三角形（二）相关推荐

最新文章

热门文章