关闭

前端图形技术 之 CSS 实现标签容器

标签: css-border标签css三角形after伪元素css盒模型
822人阅读 评论(0) 收藏 举报
分类:

只要你理解了盒模型,你可以把任何一个元素以一定的图形外观显示,比如常见的三角形、梯形、圆形,甚至平行四边形、五角星等你觉得不可能实现的图形,那么咱就来看看它们怎么实现的吧!本文只讲注重讲原理,只是实现一种三角形来应用到标签容器。

先看看下面的预备知识。。很重要的,知道了这些基础知识,说不定你还可以创新出其他的实现呢!!

等腰三角形 && 等腰梯形 实现机理


盒模型边框层分割线

三角形的实现是借助了 CSS 的盒模型,盒模型包含四层(可能五层),内容、内边距、边框和外边距,其中边框可以赋予样式,包括线的粗细、颜色、虚实和透明度。最重要的一点是外边三层都可以分方向设置,那么我们可以大胆假设,两个方向的边框区域绝对是平分的,也就是边框矩形顶点和内容矩形顶点连线,因为这个规则最合理。

我们用例子证明这一点:

<figure class="border-division"></figure>
.border-division{
  width: 40px;
  height: 40px;
  border-top: 40px solid rgb(255, 0, 0);
  border-right: 40px solid rgb(255, 0, 255);
  border-bottom: 40px solid rgb(0, 255, 0);
  border-left: 40px solid rgb(0, 0, 255);
}

效果:

梯形边框

可以看出,四个方向的边框分界线就是内容和边框矩形的顶点连线,Yes! 四个方向的边框都成为了等腰梯形,这就给了我们无限的遐想空间 ^^.

实现等腰三角形

那么我们继续,如果将内容区域尺寸设置为 0*0,那么梯形的上边就会变成点,这是等腰梯形变身等腰三角形,看下:

.border-division{
  width: 0px;
  height: 0px;
  border-top: 80px solid rgb(255, 0, 0);
  border-right: 80px solid rgb(255, 0, 255);
  border-bottom: 80px solid rgb(0, 255, 0);
  border-left: 80px solid rgb(0, 0, 255);
}

效果:

三角形边框

怎么样,每个方向的边框都变成了三角形!!!

刚才提到,边框可以设置透明度,还可以分方向设置,那么好,我们让顶部边框保持原状,其他三个方向的边框设置为透明,看看能否得到我们需要的倒三角形:

倒三角

嘿嘿嘿,如愿以偿,同样的道理,我们可以实现左三角、右三角和下三角,还有四个方向的等腰梯形。

四个方向的三角形

利用这个技术可以干啥–实现小标签


网页上的一些工具提示,或者弹出框,都需要一个小标签,这个标签往往有一个箭头,指向工具或者点击点,让我们来实现他们。

<figure class="tooltip"></figure>

样式:

.tooltip{
  width: 200px;
  height: 120px;
  position: relative;
  background-color: rgb(0, 255, 0);
}
.tooltip:after{
  content: '';
  width: 0;
  height: 0;
  top: 120px;
  left: 80px;
  display: inline-block;
  position: absolute;
  border-top: 25px solid rgb(255, 0, 0);
  border-right: 20px solid rgba(255, 0, 255, 0);
  border-left: 20px solid rgba(0, 0, 255, 0);
}

效果:

标签

可以提出来的地方第一点是使用了 :after 伪元素,:before:after 作用是在相应的元素内容前和内容后添加内容,内容容器一般是行内元素,我们可以使用 display 属性改变元素的呈现状况。上面的例子中,我使用了 inline-block 改变了元素的呈现方式。第二点是使用绝对定位,这样可以随意安排三角的位置。

同样的方式,我们可以调整 top, right, bottom,left,和 三角形的指向,来制造出四个不同方向的标签:

三角在左侧


.tooltip:after{
  content: '';
  width: 0;
  height: 0;
  top: 40px;
  right: 200px;
  display: inline-block;
  position: absolute;
  border-top: 20px solid rgba(255, 0, 0, 0);
  border-bottom: 20px solid rgba(255, 0, 0, 0);
  border-right: 25px solid rgb(0, 0, 255);
}

左侧

三角在右侧


.tooltip:after{
  content: '';
  width: 0;
  height: 0;
  top: 40px;
  left: 200px;
  display: inline-block;
  position: absolute;
  border-top: 20px solid rgba(255, 0, 0, 0);
  border-bottom: 20px solid rgba(255, 0, 0, 0);
  border-left: 25px solid rgb(0, 0, 255);
}

右侧

三角在顶部


.tooltip:after{
  content: '';
  width: 0;
  height: 0;
  bottom: 120px;
  left: 80px;
  display: inline-block;
  position: absolute;
  border-bottom: 25px solid rgb(255, 0, 0);
  border-right: 20px solid rgba(255, 0, 0, 0);
  border-left: 20px solid rgba(0, 0, 255, 0);
}

顶部

总结


今天主要是讲了利用盒模型的边框层实现等腰梯形和等腰三角形,其实还可以实现直角三角形的,如果你理解了盒模型,那么这不是问题,这个聪明的你可以自己实现吗?

提示,两个相邻等腰三角形加在一起,就是直角三角形。

本文主要是利用 CSS 的老特性实现的,所以可以很好的兼容不同的浏览器,注意我使用的颜色值都是 rgb 和 rgba,把这个换成十六进制的颜色,你就可以尽情的把本文实现的效果应用到你的前端项目了。

接下来,我会讲讲 CSS3 中的构造图形技术。。敬请期待 ^_^

1
0
查看评论

css画项目里常用的多边形(三角形、梯形)

暂时放这些,以后遇到别的继续收录 效果图如下: 代码: html> html lang="en"> head> meta charset="UTF-8"> title>css形状title>...
  • liona_koukou
  • liona_koukou
  • 2017-12-05 10:16
  • 71

css实现tag

新的需求要求实现一个可适应的tag,如下图所示: 一开始实现的时候,想法过于简单,把标签整个切成一个背景图,结果发现当文字的长度不固定的时候,将会把图形拉扯变形,十分难看,为了解决这个问题,在同事的点拨下,决定把背景图切成两部分,即: ————–切图容易拼凑难,且切且珍惜————...
  • aiyishengyishi
  • aiyishengyishi
  • 2016-11-30 18:14
  • 619

HTML容器标签和文本标签

html中的容器级标签和文本级标签,css中的块级元素和行内元素是我们常常拿来比较的四个名词(行内块级暂时先不考虑)。容器标签容器级的标签可以简单的理解为能嵌套其它所有标签的标签。 常见容器级的标签: div h ul ol dl li dt dd ...。 文本标签文本级的标签对应容器级标签,只能...
  • h22111
  • h22111
  • 2016-11-26 16:36
  • 3329

Web前端H5之HTML标签总结(一)

1、Web标准介绍 * web应用领域: PC端 移动端 * 网页介绍 ** 组成:文字、图片、按钮、视频、音频。。。。这些元素组成 ** web标准:制作网页的规范 结构标准(HTML) ...
  • Gerry199102
  • Gerry199102
  • 2017-11-13 04:30
  • 358

如何使用CSS3实现一个3D商品标签

使用3D缎带形状的标签是常见的一个设计模式,用在商品折扣、文章标题或网站推荐信息上, 来突出显示重点内容,吸引用户视觉焦点。实现的方法有2种,一种是使用背景图片,一种是使用三角形的CSS3伪元素。 本文介绍第2种方法,使用一个最简化的实例来讲解如何实现这个效果
  • iefreer
  • iefreer
  • 2016-05-15 13:02
  • 3934

实现字体滚动效果的标签 <marquee>详解

html标签——可以实现多种滚动效果,无需js控制。使用marquee标签不仅可以滚动文字,也可以滚动图片,表格等,而且使用起来方便快捷。 该标签是个容器标签 语法: 以下是一个最简单的例子: 代码如下: Hello, World   下...
  • SeekerTime
  • SeekerTime
  • 2017-03-27 14:27
  • 326

Web前端开发实战6:CSS实现导航菜单结合二级下拉式菜单的简单变换

前面几篇博文都在讲导航菜单和二级下拉式菜单,其实有很多方法都可以实现的,具体的情况还要视情况而定。 在后面学习到jQuery框架之后,会有更丰富的动画效果,由于在学习Ajax和jQuery的初步阶段,对于很多的复杂的导 航菜单和二级下拉式菜单没法做,但是学习了CSS和JS还是能实现一些简单的变换...
  • erlian1992
  • erlian1992
  • 2016-01-08 16:12
  • 3837

html + css 容器居中一例

指定了 width 属性的容器,当 left-margin 和 right-margin 设置为 auto 的时候,容器会居中显示。<body> <p>Analog synthsizers are often said to have a "warmer&q...
  • u010620626
  • u010620626
  • 2017-02-12 23:51
  • 449

前端小案例-纯css做缩略图悬停效果

前端本身很杂,想必在学前端的大家都懂,前端技能的各种学习心得,各种教程,只要你有一颗学习的心都可以搞定,关键在于你有没有需求分析的能力,解决问题的能力,这两个才是决定工资高低的本事,就那么点知识嘛,大家都懂了,拼的还是这两点能力。
  • qq_39345165
  • qq_39345165
  • 2017-12-03 21:54
  • 86

前端css 页面高斯模糊效果

问题:前端如何制作高斯模糊的背景图 最近在开发模仿APP页面,制作mp3播放器背景的时候,需要用到高斯模糊的背景图,前端如何实现呢? 这时候我们就要说到 CSS 3 中的一个属性Filter 了。 先说案例吧,效果图如下: class = 'playerBox...
  • qq_34664239
  • qq_34664239
  • 2018-01-25 18:59
  • 81
    个人资料
    • 访问:306671次
    • 积分:3714
    • 等级:
    • 排名:第10350名
    • 原创:60篇
    • 转载:0篇
    • 译文:0篇
    • 评论:180条
    博客专栏
    文章分类
    最新评论