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. Python 函数中，参数是传值，还是传引用？

    在 C/C++ 中,传值和传引用是函数参数传递的两种方式,在Python中参数是如何传递的?回答这个问题前,不如先来看两段代码. 代码段1: def foo(arg): arg = 2 print(a ...

  2. U-boot2010.06移植--阶段一

    2011-02-24 23:14:57 我今天的移植将分如下3步.加上写记录文档,预计时间3小时. 一,不改变源码,完成编译. 二,修改源码,搭建一个U-boot的框架,完成编译. 三,修改源码,完成 ...

  3. python学习教程,史上最全面的python学习路线图

    Python 是Web 开发.游戏脚本.计算机视觉.物联网管理和机器人开发的主流语言之一,随着Python用户可以预期的增长,它还有机会在多个领域里登顶.Python学习路线分享给你. 阶段一是Pyt ...

  4. dataguard从库数据库丢失恢复例子(模拟所有的控制文件)

    1.退出日志应用模式[oracle@localhost ~]$ sqlplus /nolog SQL*Plus: Release 11.2.0.4.0 Production on Mon Jan 14 ...

  5. const与volatile

    C或者C++基本上是按照从上到下.从左至右的顺序来读.但对于指针声明从某种意义上来讲是倒着的. C或者C++中每个声明都由两部分组成:零个或者多个声明说明符,一个或者多个用逗号隔开的声明符. cons ...

  6. SpringBootsad整合EhCache做缓存处理

    轻量级的缓存框架Ehcache实现其功能.从以下几点切入: 什么是EhCache? 它和redis.membercache比较有什么优势? 和SpringBoot怎么整合? 实现机制? 有哪些坑? E ...

  7. Docker Doc之一：小白入门

    Docker与虚拟机相比有更大的优势,而且微软巨硬全力支持Docker,这个不得不让大家关心一下Docker的3W. Docker是什么 2013 年初,PaaS 提供商 dotCloud 开源了一个 ...

  8. 聚合函数与F/Q表达式

    聚合函数 取名: field + __ + 聚合函数名字 ,如:price__avg:可传关键字参数修改名字:avg=Avg("price"): aggregate:不会返回一个  ...

  9. while循环和递归

    这个问题是在数据结构的二叉树添加结点的时候碰见  添加新结点的时候可以用while循环自身解决(这里这个方式更好) 也可以用递归解决 递归就像小明去楼顶取东西 ,从一楼开始爬,看,不是的,继续爬,每层 ...

  10. Java 设置PDF文档背景——单色背景、图片背景

    一般生成的PDF文档默认的文档底色为白色,我们可以通过一定方法来更改文档的背景色,以达到文档美化的作用. 以下内容提供了Java编程来设置PDF背景色的方法.包括2种设置方法: 设置纯色背景色 设置图 ...