纯css三角形及其应用

aaron 发布于2019-08-30 14:04 / 797人阅读

摘要：前言对于气泡对话框或者与内容连接部分会有小三角形效果，可能在以前直接用图片去实现，其实用纯即可实现，下面要实现的效果分别是微信对话框和面包屑，以此回顾记录一下。

前言

对于气泡对话框或者Popover与内容连接部分会有小三角形效果，可能在以前直接用图片去实现，其实用纯css即可实现，下面要实现的效果分别是微信对话框和面包屑，以此回顾记录一下。

效果如下：

css写三角形原理

首先我们设置一个div元素的宽高和边框，观察效果

.demo1 {
  width: 40px;
  height: 40px;
  border-width: 20px;
  border-style: solid;
  border-color: #ff0000 #00ff00 #0000ff #ff00ff;
}

效果

可以发现分别观察四边框是按类似等边梯形绘制的，如果进一步把宽高设小，甚至设为0，就会呈现为三角形，于是

.demo2 {
  width: 0;
  height: 0;
  border-width: 20px;
  border-style: solid;
  border-color: #ff0000 #00ff00 #0000ff #ff00ff;
}

效果

果然是这样的，下面要做的是把其中某个三角形多带带提取出来显示，其他都显示为transparent，于是就有了

.demo3 {
  width: 0;
  height: 0;
  border-width: 20px;
  border-style: solid;
  border-color: transparent;
  border-left-color: #ff00ff;
}

效果

一个指向右边的三角形大功告成，要其他方向的三角形，只需改变透明的边框即可。

应用

有时我们不需要整个实心的三角形，而只需要类似与>不同方向箭头的效果，例如popover气泡框效果。这样就需要两个三角形通过重叠错位来实现这样的效果，重叠三角形B颜色和气泡框背景色一样，被重叠三角形A颜色和气泡框边框颜色一样。

实现微信对话框效果

两个三角形重叠错位，意味着要两个元素，但是这样一来就增加了这个小功能的复杂度，其实可以利用标签的伪元素:before和:after来充当元素画出两个三角形。

html部分

hi，在吗？

css部分

.chat-dialog {
  position: relative;
  width: 180px;
  height: 32px;
  line-height: 32px;
  border-radius: 5px;
  margin-left: 30px;
  border: 1px solid #009a61;
  padding: 4px;
}

.chat-dialog:before,
.chat-dialog:after {
  content: "";
  display: block;
  position: absolute;
  top: 13px;
  left: -13px;
  width: 0;
  height: 0;
  border-width: 6px;
  border-color: transparent;
  border-style: solid;
  border-right-color: #009a61;
}

.chat-dialog:after {
  left: -12px;
  border-right-color: #fff;
}

效果

实现面包屑效果

同样的实现面包屑效果，只是在每块后面留出空位，再用伪元素:before和:after定位出箭头效果

html部分


    第一级
    第二级
    第三级
    第四级

css部分

.tag-tab {
  font-size: 16px;
  height: 24px;
  list-style: none;
}

.tag-tab li {
  float: left;
  position: relative;
  padding-right: 12px;

}

.tag-tab>li:before,
.tag-tab>li:after {
  position: absolute;
  top: 0;
  right: -12px;
  border-width: 12px;
  border-color: transparent;
  border-left-color: #333;
  border-style: solid;
  content: "";
  z-index: 1;
}

.tag-tab>li:after {
  right: -11px;
  border-left-color: #fff;
}

.tag-tab>li:hover {
  color: #009a61;
}

.tag-tab>li:hover:before {
  border-left-color: #009a61;
}

效果

当然，还是css3通过旋转实现的方法，简单粗暴，到后面在补充了。还有什么好方法欢迎提出哈。

云服务器 GPU云服务器纯CSS css三角形 css三角及其应用

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/115751.html

纯CSS Material Design风格按钮

摘要：以上就是纯粹利用做出来的风格按钮，相信熟练之后就可以做出更多不错的应用啰其实Material Design的扁平化icon按钮，这类型的按钮往往只利用几何色块的变化，就能抓住使用者的眼光，并且从几何形状中明白按钮的含意，这也是Material Design非常强调的设计理念和精髓。showImg(https://segmentfault.com/img/bVbrRZq); 应用重点与...

YorkChen 2019-08-02 16:14 评论0 收藏0
纯CSS Material Design风格按钮

摘要：以上就是纯粹利用做出来的风格按钮，相信熟练之后就可以做出更多不错的应用啰其实Material Design的扁平化icon按钮，这类型的按钮往往只利用几何色块的变化，就能抓住使用者的眼光，并且从几何形状中明白按钮的含意，这也是Material Design非常强调的设计理念和精髓。showImg(https://segmentfault.com/img/bVbrRZq); 应用重点与...

lsxiao 2019-08-29 18:43 评论0 收藏0
纯CSS画三角原理解析

摘要：纯画三角原理解析因为之前做一个页面出现了很多三角，开始直接用图片感觉并不是很好用，看着总是怪怪的颜色还很难调整的跟背景一样，就搜了一波代码直接用上了，事后想了一下感觉不知道具体原理是什么，很奇怪为什么边框能设置成三角的样式。纯CSS画三角原理解析因为之前做一个页面出现了很多三角，开始直接用图片感觉并不是很好用，看着总是怪怪的颜色还很难调整的跟背景一样，就搜了一波代码直接用上了，事后...

lidashuang 2019-08-30 14:03 评论0 收藏0
纯 Css 绘制扇形

摘要：显而易见饼干为两个削成了圆形的，我们重点演示果酱是怎么制作的如图所示，大扇形由个小扇形构成，每一小扇形占整个圆饼的，大扇形占整个圆饼的。则小扇形的圆心角为，三角形的高为，宽为。阅读此文需具备基本数学知识：圆心角、弧度制、三角函数。为实现如下效果呕心沥血： showImg(https://segmentfault.com/img/remote/1460000018140398?w=2...

kel 2019-08-29 13:48 评论0 收藏0
纯CSS实现对白框

摘要：如果一个盒子的长宽都为零，那么它的四条就会碰到一起，变成实心的，而且每一条都是一个三角形我们就可以利用三角形来实现对白框的尖下巴。可以用和伪元素来实现，也可以在大盒子里放置小盒子再绝对定位。如果一个盒子的长宽都为零，那么它的四条border就会碰到一起，变成实心的，而且每一条border都是一个三角形；我们就可以利用三角形来实现对白框的尖下巴。通过把border上左设置为有颜色，...

jlanglang 2019-08-30 13:20 评论0 收藏0