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. 最小生成树模板题 hpu 积分赛 Vegetable and Road again

    问题 H: Vegetable and Road again 时间限制: 1 Sec 内存限制: 128 MB 提交: 19 解决: 8 题目描述 修路的方案终于确定了.市政府要求任意两个公园之间都必 ...

  2. 【Spark-core学习之六】 Spark资源调度和任务调度

    环境 虚拟机:VMware 10 Linux版本:CentOS-6.5-x86_64 客户端:Xshell4 FTP:Xftp4 jdk1.8 scala-2.10.4(依赖jdk1.8) spark ...

  3. 详解Python变量在内存中的存储

    这篇文章主要是对python中的数据进行认识,对于很多初学者来讲,其实数据的认识是最重要的,也是最容易出错的.本文结合数据与内存形态讲解python中的数据,内容包括: 引用与对象 可变数据类型与不可 ...

  4. Flask最强攻略 - 跟DragonFire学Flask - 第十五篇 Flask-Script

    其实本章就是为下一章做的铺垫啦,但是也要认真学习哦 Flask-Script 从字面意思上来看就是 Flask 的脚本 是的,熟悉Django的同学是否还记得Django的启动命令呢? python ...

  5. python_study-1

    # Author:larlly'''函数1.在Python交互式命令行下,可以直接输入代码,然后执行,并立刻得到结果.2.文本编辑器推荐俩款 http://www.sublimetext.com/ h ...

  6. 《CSS世界》读书笔记（四）--宽度分离

    <!-- <CSS世界>张鑫旭著 --> CSS流体布局下的宽度分离原则 所谓“宽度分离原则”,就是CSS中的width属性不与影响宽度的padding/border(有时候包 ...

  7. c#高级编程第七版 学习笔记 第二章 核心c#

    第二章 核心C# 本章内容: 声明变量 变量的初始化和作用域 C#的预定义数据类型 在c#程序中使用条件语句.循环和跳转语句执行流 枚举 名称空间 Main()方法 基本的命令行c#编译器选项 使用S ...

  8. CNN - 卷积神经网络

    例:  卷积公式: 卷积和卷积没有什么特别的关系,只是计算步骤比较像,成为卷积神经网络名字的由来. 感受野:单个感觉神经元的感受野是感觉空间的特定区域(如体表或视野),在这个区域内,刺激会改变神经元的 ...

  9. Docket 使用命令

    Docket 使用命令 查 # 查询当前可以下载的镜像 docker search httpd  |_ NAME:镜像仓库源的名称 |_ DESCRIPTION:镜像的描述 |_ OFFICIAL:是 ...

  10. hadoop+kerberos常用运维命令

    kerberos相关: kadmin.local //以超管身份进入kadmin kadmin //进入kadmin模式,需输入密码 kdb5_util create -r JENKIN.COM -s ...