关闭

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

标签: css-border标签css三角形after伪元素css盒模型
564人阅读 评论(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

查看评论
* 以上用户言论只代表其个人观点,不代表CSDN网站的观点或立场
    个人资料
    • 访问:259627次
    • 积分:3328
    • 等级:
    • 排名:第11229名
    • 原创:60篇
    • 转载:0篇
    • 译文:0篇
    • 评论:175条
    博客专栏
    文章分类
    最新评论