1、css图形简介

在浏览网页的时候，我们经常看见各种图形的效果，而但凡涉及到图形效果，我们第一个想到的就是用图片来实现。但是在前端开发中，为了网站的性能速度，我们都是秉承着少用图片的原生质。

因为图片实现有两个很明显的缺点：一是图片大小比较大数据传输量大，二是一张图片会引发一次http请求。这两个方面都会影响页面加载速度，并且增加服务器负担

在实际开发中，对于下面图片效果我们更趋向于使用css实现方法

（1）三角形

（2）圆形于圆角

（3）椭圆形

css实现的图形效果更多用于展示，并不适用JavaScript动态操作，若果想要实现JavaScript动态操作，大家应该去了解canvas或SVG

一、三角形

在css盒子模型中，当一个盒子的两条边在边角处相交，浏览器会在交点处按照某个角度（如果盒子是正方形，则为顺时针45度、135度、225度、315度）绘制一条接合线。

例子：

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>css图形三角形</title>

    <style type="text/css">

        #box{

            width: 30px;

            height: 30px;

            border-width: 20px;

            border-style: solid;

            border-color: yellow blue red green;

        }

    </style>

</head>

<body>

    <div id="box"></div>

</body>

</html>

结果：

当我们把width、height设置为0时

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>css图形三角形</title>

    <style type="text/css">

        #box{

            width: 0;

            height: 0;

            border-width: 20px;

            border-style: solid;

            border-color: yellow blue red green;

        }

    </style>

</head>

<body>

    <div id="box"></div>

</body>

</html>

结果：

这是我们在把左右下三个边的颜色设置为transparent（透明）

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>css图形三角形</title>

    <style type="text/css">

        #box{

            width: 0;

            height: 0;

            border-width: 20px;

            border-style: solid;

            border-color: yellow transparent transparent transparent;

        }

    </style>

</head>

<body>

    <div id="box"></div>

</body>

</html>

结果：

带边框的三角形

要实现带边框的三角形，我们知道刚才实现的三角形本来就是通过三角形实现的，不可能在设置border，这时候我们就需要用两个三角形来实现，背景色通过内三角形实现，边框通过外三角形实现然后通过定位布局重叠在一起。

注意，两个三角形定位要相差一个像素，一般情况下，都是将内层三角形相对于外层三角形进行定位，偏移1像素。

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>带边框的三角形</title>

    <style type="text/css">

        /*外三角形*/

        #triangle{

            position: relative;

            width: 0;

            height: 0;

            border-width: 30PX;

            border-style: solid;

            border-color: transparent transparent black transparent;

        }

        /*内层三角形*/

        #triangle div{

            position: absolute;

            top: 1px;

            left: 0px;

            width: 0;

            height: 0;

            border-width: 29px;/*注意内层三角形边高29px*/

            border-style: solid;

            border-color: transparent transparent #BBFFEE transparent; 

        }

    </style>

</head>

<body>

    <div id="triangle">

        <div></div>

    </div>

</body>

</html>

结果

为什么跟预想的不一样呢？

这是因为子元素绝对定位是根据父元素的“内容边界”进行定位的，而不是根据我们耨眼搜看见的三角形边界来进行定位。又因为盒子的宽高皆为0，因此content实在盒子的中心。

这时把top:-28px;left:-29px;就可以了；

css图形——三角形的更多相关文章

  1. CSS 魔法系列：纯 CSS 绘制三角形（各种角度）

    我们的网页因为 CSS 而呈现千变万化的风格.这一看似简单的样式语言在使用中非常灵活,只要你发挥创意就能实现很多比人想象不到的效果.特别是随着 CSS3 的广泛使用,更多新奇的 CSS 作品涌现出来. ...

  2. 奇妙的 CSS shapes(CSS图形)

    CSS 发展到今天已经越来越强大了.其语法的日新月异,让很多以前完成不了的事情,现在可以非常轻松的做到.今天就向大家介绍几个比较新的强大的 CSS 功能: clip-path shape-outsid ...

  3. 美丽的CSS图形和HTML5

    1.HTML5基础 文档类型 <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "htt ...

  4. 各种demo：css实现三角形，css大小梯形，svg使用

    各种demo: 1.css实现正方形 思路:width为0:height为0:使用boder-width为正方形的边长的一半,不占任何字节:border-style为固体:border-color为正 ...

  5. 前端（各种demo）一：css实现三角形，css实现梯形，pop弹层，css伪类before，after使用，svg使用（持续更新中）

    各种demo: 1.css实现正方形 思路:width为0:height为0:使用boder-width为正方形的边长的一半,不占任何字节:border-style为固体:border-color为正 ...

  6. 奇妙的 CSS shapes(CSS图形) 【css 图形，绘图，CSS 几何图形)】

    http://www.cnblogs.com/coco1s/p/6992177.html <!DOCTYPE html> <html> <head> <met ...

  7. CSS图形基础：纯CSS绘制图形

    为了在页面中利用CSS3绘制图形,在页面中定义 <div  class="container"> <div class="shape"> ...

  8. 【面试技巧】老生常谈之 n 种使用 CSS 实现三角形的技巧

    在一些面经中,经常能看到有关 CSS 的题目都会有一道如何使用 CSS 绘制三角形,而常见的回答通常也只有使用 border 进行绘制一种方法. 而 CSS 发展到今天,其实有很多有意思的仅仅使用 C ...

  9. CSS制作三角形和按钮

    CSS制作三角形和按钮 用上一篇博文中关于边框样式的知识点,能制作出三角形和按钮. 我先说如何制作三角形吧,相信大家在平时逛网站的时候都会看到一些导航栏中的三角形吧,比如说: 网易首页的头部菜单栏中, ...

随机推荐

  1. Go 初体验 - 令人惊叹的语法 - defer.2 - 如何提前执行？

    上一文中讲到 defer 会在宿主函数 return 之前调用,那么我们就是想在宿主函数执行到中间调用,怎么办呢? 1. 改变宿主函数逻辑,分成多个函数,需要的那个函数里 defer . 2. 使用匿 ...

  2. linux关闭终端响铃

    title: linux关闭终端响铃 date: 2018-01-25 15:10:14 tags: linux categories: linux 在终端输入或是直接在.bashrc里添加一行 xs ...

  3. linux下目录的作用

    FHS针对目录树架构仅定义出三层目录底下应该放置什么数据而已,分别是底下这三个目录的定义: / (root, 根目录):与开机系统有关: /usr (unix software resource):与 ...

  4. JAVA多线程之CountDownLatch与join的区别

    首先,我们来看一个应用场景1: 假设一条流水线上有三个工作者:worker0,worker1,worker2.有一个任务的完成需要他们三者协作完成,worker2可以开始这个任务的前提是worker0 ...

  5. thymeleaf 添加语法提示

    thymeleaf 添加语法提示: xmlns:th="http://www.thymeleaf.org"

  6. Linux基础命令---lp打印文件

    lp lp指令用来打印文件,也可以修改存在的打印任务.使用该指令可以指定打印的页码.副本等. 此命令的适用范围:RedHat.RHEL.Ubuntu.CentOS.Fedora.openSUSE.SU ...

  7. vue 监听变量或对象

    注意:监听的对象必须已经在data中声明了 data: { a: 1, b: 2, c: 3, d: 4, e: { f: { g: 5 } } }, watch: { a: function (va ...

  8. Shift键的三个妙用！Word又现神操作！

    1.Shift+Alt+上下方向键 :调整段落顺序 同时按这三个键,能够调整段落的顺序,也可以用来调整表格中的行序. 2.Shift+F3:英文大写/小写/首字母大写,这三种模式切换 PS:如果中间夹 ...

  9. Grunt： 拼接代码，js丑化（压缩），css压缩，html压缩，观察文件，拷贝文件，删除文件，压缩文件

    准备工作 grunt 基于nodeJs所以 nodeJs需要的基础配置都需要安装 1.Grunt 安装 npm install -g grunt-cli 这是全局安装 2.在当前文件下npm init ...

  10. Linux mail 邮件发送

    Linux mail 邮件介绍 在Linux系统下我们可以通过”mail“命令,发送邮件,在运维中通常我们它来实现邮件告警. 安装 (方案1) 一.安装邮件服务 yum install -y send ...