类似三角形的形状的元素在网页中可能会用到，我们可以用图片或者CSS元素达到我们想要的效果。这里讲一下是讲自己使用HTML+CSS实现三角形的方式。

为了能够熟悉的使用HTML+CSS构建三角形，我们首先要熟悉以下代码以及代码所实现的效果：

<!DOCTYPE html>

<html lang="en">

<head>

  <meta charset="UTF-8">

  <title>shape</title>

  <style type="text/css">

      .shape{

        height: 0;

        width: 0;

        border-top: 100px solid red;

        border-right: 100px solid blue;

        border-bottom: 100px solid yellow;

        border-left: 100px solid green;

      }

  </style>

</head>

<body>

  <div class="shape"></div>

</body>

</html

这是一个HTML页面，我们定义一个class=shape的元素，为元素设置宽度和高度均为0，上下左右的border为100px并且用不同颜色填充，最终会有以下效果：


可以观察到，上下左右的border都占有45度直角三角形区域，底为100px+100px，高为100px。

如果我们希望实现如下图的三角形形状：

我们可以保留如下图中1或者2的位置：

我选择1区域，最终CSS如下:

.shape01{

  height: 0;

  width: 0;

  border-top: 100px solid transparent;

  border-right: 100px solid blue;

}

其他情况类似。

CSS实现三角形效果的更多相关文章

  1. css自定义三角形效果

    废话不说了,直接上代码 element{ width:0px; height:0px; border-left:10px; border-right:10px; border-bottom:10px; ...

  2. 如何使用CSS实现小三角形效果

    如何使用CSS实现小三角形效果:建议:尽可能的手写代码,可以有效的提高学习效率和深度.在众多的网页效果中,都有小三角形效果的应用,能够增加特定应用的美观度,下面就给出一段实例代码,里面介绍了两种实现小 ...

  3. CSS制作三角形和按钮

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

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

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

  5. CSS 制作三角形原理剖析

    使用css制作三角形其实原理很简单,下面一步步解析. 1.html代码如下 <div class="triangle"> </div> 2.CSS代码 .t ...

  6. css绘制三角形原理

    1.新建一个元素,将它的宽高都设置为0:然后通过设置border属性来实现三角形效果,下面是css绘制三角形的原理: <!DOCTYPE html> <html> <he ...

  7. 纯CSS写三角形-border法

    (1)有边框的三角形 我们来写下带边框的三角形. 如果是一个正方形,我们写边时,会用到border,但我们这里讨论的三角形本身就是border,不可能再给border添加border属性,所以我们需要 ...

  8. 经典CSS实现三角形图标原理解析

    前言: 在写这篇文章之前,我也看过很多前端大神写的代码,But,都只是粘贴代码和给出显示效果,对于初学者来说大家都喜欢刨根问底,为什么要这样做呢? 接下来就让我给大家分享一下我对CSS实现三角形的理解 ...

  9. 用css制作三角形

    用css制作三角形,主要是利用css元素给“盒模型”设置边框得到的. 上图,上边框和做边框,以及上边框和右边框的交合处,浏览器会按照直角的二分之一处绘制交合线.这是“盒模型”有宽和高时候的效果.我们假 ...

随机推荐

  1. Nginx源码研究二：NGINX的事件处理概论

    NGINX作为服务端的应用程序,在客户端发出数据后,服务端在做着这样一些处理,数据先会经过网卡,网卡会和操作系统做交互,经过操作系统的协议栈处理,再和不同的应用程序交互. 在这里面涉及两个概念,一个是 ...

  2. Asp.net禁用页面缓存的方法

    方法1.在Asp页面首部<head>中添加如下代码 Response.Buffer = True Response.ExpiresAbsolute = Now() - 1 Response ...

  3. Java前辈：学习J2EE流程中的经验和教训

    Java前辈:学习J2EE流程中的经验和教训   在这里我谈谈我在学习j2ee流程,并谈到在此过程中领会的经验和教训.以便后来者少走弯路. Java发展到现在,按应用来分主要分为三大块:J2SE,J2 ...

  4. 转：DSP学习经验

    转载:http://www.cnblogs.com/MrYang/archive/2010/12/21/1913035.html

  5. ECMA 6 记入

    好书推荐 : http://es6.ruanyifeng.com/ String.prototype -includes, startsWith, endsWith -padStart, padEnd ...

  6. hdu 4535 吉哥系列故事——礼尚往来

    http://acm.hdu.edu.cn/showproblem.php?pid=4535 错排公式:a[i]=(i-1)*(a[i-2]+a[i-1]): #include <cstdio& ...

  7. Delphi判断进程是否存在（使用CreateToolhelp32Snapshot）

      program Project2; uses windows,TLHelp32; function FindProcess(AFileName:string):boolean; var hSnap ...

  8. COJ 0138 NOIP201108计算系数

    NOIP201108计算系数 难度级别:A: 运行时间限制:1000ms: 运行空间限制:51200KB: 代码长度限制:2000000B 试题描述 给定一个多项式(ax + by)^k,请求出多项式 ...

  9. Response.Expires 属性 （转载于疯狂客的BLOG）

    Expires 属性 Expires 属性指定了在浏览器上缓冲存储的页距过期还有多少时间.如果用户在某个页过期之前又回到此页,就会显示缓冲区中的版本 语法 Response.Expires [= nu ...

  10. 关于本学期西南交通大学ACM-ICPC校集训队 训练计划（Beta 1.0）

    在第十周新秀杯之后,从第十一周起的训练计划如下: 1.十一周的周一至周五进行ACM校集训队申请.申请方式从2014年11月17日0:00开始,发送申请者的姓名.学号.专业.电话.QQ以及大学(针对大一 ...