【转载】酷酷的CSS3三角形运用

转载：http://www.cnblogs.com/keepfool/p/5616326.html

概述

在早期的前端Web设计开发年代，完成一些页面元素时，我们必须要有专业的PS美工爸爸，由PS美工爸爸来切图，做一些圆角、阴影、锯齿或者一些小图标。

在CSS3出现后，借助一些具有魔力的CSS3属性，使得这些元素大多都可以由开发人员自己来完成。
在开始阅读这篇文章前，我们先喊个口号：不想当艺术家的程序员不是好设计师！

本文的Demo和源代码已放到GitHub，如果您觉得本篇内容不错，请点个赞，或在GitHub上加个星星！

Triangle DemoPage DemoGitHub Source

图例

我们先来看一副设计图

这幅图复杂的元素不多，布局也较为简单，我们大致分析一下，需要PS美工爸爸帮忙做的只有一件事情，就是将上半部分的蓝色背景图给抠出来。
除此之外，出现在这幅设计图的一些特殊形状和小图标，都可以通过CSS3来实现。
我们将这些特殊形状和小图标分为两类：

1. 可以用Icon Font实现的

Icon Font是将一些图标作成字体文件，在CSS中指定font-face和font-family，然后为每个图标指定相应的class。
在网页中使用Icon Font就像使用普通的文字一样，比如font-size属性可以设定图标的大小，设定color属性可以设定图标的颜色。
更多内容，请参考阿里巴巴矢量图标管理网站：http://iconfont.cn/。

2. 不能用IconFont实现的

为什么这些图形不用IconFont实现呢？因为通常Icon Font提供的都是一些正方形的矢量图标，也就是长等于宽的图标。
本篇要讲的就是如何通过CSS3来实现这4个图形。

三角形

不知大家注意到了没有，这4个图形都包含了一个特殊的元素——三角形。
这4个图形，都是由三角形、长方形，或者是一个被啃掉了一口的长方形组成的。

CSS3是如何实现三角形的呢？——答案是通过边框，也就是border属性。

长方形边框

HTML的块级元素都是长方形的，比如我们设定了以下样式：

<style>
    .simple-retangle {
        margin: 50px auto;
        width: 200px;
        height: 200px;
        border: 40px solid salmon;
    }
</style>
<div class="simple-retangle"></div>

如大家所认知的，这只是一个简单的长方形，这个长方形在画面中是这样显式的：

这个长方形太单调了，再给它点颜色看看，咱们来个彩色边框吧。

<style>
    .colored-border-retangle {
        margin: 50px auto;
        width: 200px;
        height: 200px;
        border-top: 40px solid coral;
        border-right: 40px solid lightblue;
        border-bottom: 40px solid lightgreen;
        border-left: 40px solid mediumpurple;
    }
</style>
<div class="colored-border-retangle"></div>

在画面中，每个边框都变成一个梯形了。

为什么它会变成梯形呢？

请注意长方形的4个角，以左上角为例，它到底是属于左边框还是上边框呢？
左上角，既属于左边框，又属于上边框，角落的归属成了一个问题，浏览器为了不让边框打架，就让二位各分一半吧。
于是乎左上角就被一分为二，变成了两个三角形，三角形靠近哪个边框，就显示那个边框的颜色。

三角形的实现

再看看文章开头的4个图案，你是不是又发现了这样一个规律？每个三角形都是“小家碧玉”的，它们没有内容。
既然如此，我们把上面这个彩色边框的矩形内容拿掉，看看会发生什么。

<style>
    .colored-border-empty-retangle {
        margin: 50px auto;
        border-top: 40px solid coral;
        border-right: 40px solid lightblue;
        border-bottom: 40px solid lightgreen;
        border-left: 40px solid mediumpurple;
    }
</style>
<div class="colored-border-empty-retangle"></div>

呜，cool！左边和右边都是三角形了 耶！

为什么上边和下边还是梯形呢？这是因为块级元素默认会在页面上水平平铺。
理解这一点，让上边和下边也变成三角形就简单了，将元素的width属性设为0：

<style>
    .colored-border-empty-retangle {
        margin: 50px auto;
        width: 0;
        height: 0;
        border-top: 40px solid coral;
        border-right: 40px solid lightblue;
        border-bottom: 40px solid lightgreen;
        border-left: 40px solid mediumpurple;
    }
</style>
<div class="colored-border-empty-retangle"></div>

现在上下左右4个边框都是三角形了。

假设我们不要4个三角形，也不要让它们凑一块，我们就只要1个三角形，该如何做呢？
将其他3个边框的颜色设为透明色：

<style>
    .triangle-top,
    .triangle-right,
    .triangle-bottom,
    .triangle-left {
        margin: 20px auto;
        width: 0;
        height: 0;
        border: 100px solid transparent;
    }

    .triangle-top {
        border-top-color: coral;
    }

    .triangle-right {
        border-right-color: lightblue;
    }

    .triangle-bottom {
        border-bottom-color: lightgreen;
    }

    .triangle-left {
        border-left-color: mediumpurple;
    }
</style>
<div class="triangle-top"></div>
<div class="triangle-right"></div>
<div class="triangle-bottom"></div>
<div class="triangle-left"></div>

图案实现

知道了三角形的实现方法，那么下面4个图案实现起来就小Case了。

这4个图案分别是：旗帜，向右的双实心箭头，气泡和丝带。

View Demo

为了便于这几种图案的演示，我们先设定以下基础共通的样式

* {
    font-family: simhei, sans-serif;
    box-sizing: border-box;
}

html {
    font-size: 62.5%;
}

body {
    background-color: lightblue;
}

div {
    margin: 20px auto;
}

实现旗帜

旗帜图案是下半部分被啃掉了一口的长方形，这一口是个三角形。


根据以上知识，我们很自然地就能想到实现方法，将border-bottom的颜色设置为透明的。

.flag {
    width: 0;
    height: 0;
    border: 2rem solid #FF6600;
    border-top-width: 4rem;
    border-bottom-color: transparent;
    border-bottom-width: 2rem;
}

实现双实心箭头

双实心箭头则是由两个三角形组成的

为了减少页面的HTML元素，我们可以只提供一个元素实现第1个三角形，然后借助CSS3的伪类实现第2个三角形。
第1个三角形使用了相对定位，第2个三角形使用了绝对定位，使得第2个三角形能够紧挨着第1个三角形。

.rds-arrow-wrapper {
    position: relative;
    width: 20em;
    text-align: center;
}

.rds-arrow,
.rds-arrow:after {
    display: inline-block;
    position: relative;
    width: 0;
    height: 0;
    border-top: 1rem solid transparent;
    border-left: 2rem solid #fff;
    border-bottom: 1rem solid transparent;
    border-right: 2rem solid transparent;
}

.rds-arrow {
    margin-left: 1rem;
}

.rds-arrow:after {
    content: "";
    position: absolute;
    left: 100%;
    top: -1rem;
    bottom: 0;
}

需要注意的是，箭头方向是向右的，但在CSS里面是通过border-left的颜色来控制的。

实现气泡

气泡是我们常见的一种图案，它是由一个三角形和一个长方形组成的。

由于三角形是放在长方形前面的，所以我们使用:before伪类，并设置绝对定位。

.bubble {
    position: relative;
    background-color: #33AAEE;
    width: 10rem;
    height: 3rem;
    font-size: 2rem;
    line-height: 3rem;
    color: #FFF;
    text-align: center;
}

.bubble:before {
    position: absolute;
    content: "";
    right: 100%;
    top: 1rem;
    width: 0;
    height: 0;
    border-top: 0.6rem solid transparent;
    border-right: 0.6rem solid #33AAEE;
    border-bottom: 0.6rem solid transparent;
    border-left: 0.6rem solid transparent;
}

.bubble .text {
    display: inline-block;
}

实现丝带

丝带的实现则稍微复杂一些，不过我们可以将它拆分成3个部分：

  1. 一个显示文字的长方形
  2. 左右两侧的耳朵（被啃了一口的长方形）
  3. 在下方用于显示阴影的两个小三角形

第1步：实现丝带主体长方形

.ribbon {
    position: relative;
    width: 10rem;
    height: 3rem;
    padding: 0.7rem 0;
    font-size: 1.6rem !important;
    color: #fff;
    text-align: center;
    background: #ff0066;
}

第2步：实现丝带左右两侧的耳朵

:before伪类实现左耳朵，:after伪类实现右耳朵

.ribbon:before,
.ribbon:after {
    content: "";
    position: absolute;
    display: block;
    bottom: -0.6rem;
    border: 1.5rem solid #ff0066;
    z-index: -1;
}

.ribbon:before {
    left: -2.4rem;
    border-right-width: 1.5rem;
    border-left-color: transparent;
    box-shadow: 1px 1px 0 rgba(176, 102, 166, 0.8);
}

.ribbon:after {
    right: -2.4rem;
    border-left-width: 1.5rem;
    border-right-color: transparent;
    box-shadow: 0 1px 0 rgba(176, 102, 166, 0.8);
}

第3步：实现阴影

.ribbon .ribbon-content:before,
.ribbon .ribbon-content:after {
    content: "";
    position: absolute;
    display: block;
    border-style: solid;
    border-color: #bf004c transparent transparent transparent;
    bottom: -0.6rem;
}

.ribbon .ribbon-content:before {
    left: 0;
    border-width: 0.6rem 0 0 0.6rem;
}

.ribbon .ribbon-content:after {
    right: 0;
    border-width: 0.6rem 0.6rem 0 0;
}

HTML代码：

<div class="ribbon">
    <span class="ribbon-content">金卡会员</span>
</div>

最终效果：

页面实现

有以上的知识基础，实现本文开头的设计图就较为简单了。
由于代码较长，我就不贴出来了，请各位直接到GitHub上查看这个demo吧。

View Demo

总结

读完以上内容，是不是觉得实现这些图案变得很简单了？是不是感觉很酷？现在你可以叫自己为爸爸了。
三角形的运用场景非常之多，你尽可以发挥你的想象去实现它们！

时间： 2024-10-21 21:57:47

【转载】酷酷的CSS3三角形运用的相关文章

精选10款超酷的HTML5/CSS3菜单

今天向大家精选了10款超酷的HTML5/CSS3菜单,给你的网页添加不一样的精彩,一起来围观一下吧. 1.CSS3手风琴菜单 下拉展开带弹性动画 利用CSS3技术可以实现各种各样的网页菜单,我们之前也在CSS3菜单栏目中分享了许多CSS3菜单.今天我们分享的这款是CSS3手风琴菜单,菜单项在展开和收缩的时候菜单项会有弹性动画效果.每一层父级菜单有一个小三角,菜单项在展开的时候这个小三角也会出现动画,非常酷. 在线演示 / 源码下载 2.CSS3动画下拉菜单 带动画图标 利用CSS3可以制作很多精

【超酷超实用】CSS3可滑动跳转的分页插件制作教程

原文:[超酷超实用]CSS3可滑动跳转的分页插件制作教程 今天我要向大家分享一款很特别的CSS3分页插件,这款分页插件不仅可以点击分页按钮来实现分页,而且可以滑动滑杆来实现任意页面的跳转,看看都非常酷,很适合一些个性化的个人网站使用,当然,这款分页插件也适合ajax翻页,效果都挺不错的.先来看看效果图: 怎么样,还挺酷的吧. 当然你也可以在这里查看插件的DEMO演示. 接下来我们来分享一下源码的实现思路,这里用到了jQuery UI框架,这么酷的滑杆是靠它实现的,不然,写的累死.. 首先是HTM

CSS3 三角形运用

酷酷的 CSS3 三角形运用 概述 在早期的前端Web设计开发年代,完成一些页面元素时,我们必须要有专业的PS美工爸爸,由PS美工爸爸来切图,做一些圆角.阴影.锯齿或者一些小图标. 在CSS3出现后,借助一些具有魔力的CSS3属性,使得这些元素大多都可以由开发人员自己来完成.在开始阅读这篇文章前,我们先喊个口号:不想当艺术家的程序员不是好设计师! 图例 我们先来看一副设计图 这幅图复杂的元素不多,布局也较为简单,我们大致分析一下,需要PS美工爸爸帮忙做的只有一件事情,就是将上半部分的蓝色背景图给

CSS3—三角形

话不多说看效果:演示效果,runjs 1.加了宽高和border,边用不同颜色显示,每条边都是一个梯形 2.去掉宽高,每条边都是三角形 3.只显示其中一条边就是不同的三角形了,是不是很简单,改变border四条边宽度试试吧~ 上述代码如下: <!DOCTYPE html> <html lang="en"> <head> <meta http-equiv="Content-Type" content="text/ht

一步一步实现500px引导动画 -- 酷酷哒

一步一步实现500px引导动画 – 酷酷哒 转载请注明出处 : http://blog.csdn.net/hpu_zyh/article/details/47749859 博客主页 | 简书 | 知乎 | 微博 | github 下了500px应用, 瞬间被它的引导动画吸引住了,下面一步一步来实现引导动画 最终效果图: 清晰版 下面的小圆点简单的,就先省略,重点在切换动画 创建viewpager 可以左右随手指滑动的只有底部文字部分,所以ViewPager中存放的布局是底部文字部分 activi

玩转html5(一)-----盘点html5新增的那些酷酷的input类型和属性

今天正式开始学习html5了,相比html以前的版本,html5新增了好多功能,属性,使我们做出来的界面更加的绚丽,而且使用起来超级简单,这篇文章先来说说html增加的那些input类型和属性. html5新增的input类型有:email,url,number,range,date pickers,datalist,telephone,search,color email:提交时会自动验证输入的内容是否满足格式 邮箱 :<input type="email" name=&quo

csuoj 1505: 酷酷的单词

http://acm.csu.edu.cn/OnlineJudge/problem.php?id=1505 1505: 酷酷的单词 时间限制: 1 Sec  内存限制: 128 MB 提交: 340  解决: 135 [提交][状态][讨论版] 题目描述 输入一些仅由小写字母组成的单词.你的任务是统计有多少个单词是“酷”的,即每种字母出现的次数都不同. 比如ada是酷的,因为a出现2次,d出现1次,而1和2不同.再比如,banana也是酷的,因为a出现3次,n出现2次,b出现1次.但是,bbac

湖南省第十届大学生计算机程序设计竞赛：酷酷的单词

1505: 酷酷的单词 Time Limit: 1 Sec Memory Limit: 128 MB Submit: 237 Solved: 88 [Submit][Status][Web Board] Description 输入一些仅由小写字母组成的单词.你的任务是统计有多少个单词是"酷"的,即每种字母出现的次数都不同. 比如ada是酷的,因为a出现2次,d出现1次,而1和2不同.再比如,banana也是酷的,因为a出现3次,n出现2次,b出现1次.但是,bbacccd不是酷的,因

B - 酷酷的单词

B - 酷酷的单词 Time Limit:1000MS     Memory Limit:131072KB     64bit IO Format:%lld & %llu CSU 1505 Description 输入一些仅由小写字母组成的单词.你的任务是统计有多少个单词是“酷”的,即每种字母出现的次数都不同.比如ada是酷的,因为a出现2次,d出现1次,而1和2不同.再比如,banana也是酷的,因为a出现3次,n出现2次,b出现1次.但是,bbacccd不是酷的,因为a和d出现的次数相同(均

机智的Popup，带着简单的图表感觉酷酷的

之前有提过用 InfoTemplate 类对 FeatureLayer 的基本信息进行展示,今天为大家介绍 esri/dijit/Popup 的使用,这东西还有 简单的图表展示功能呢! <!DOCTYPE html> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8"> <meta name="