使用border绘制三角形的思路，就是border尺寸设置一个较大的值，元素自身的宽高设置为0，全部由边线占据，这样每边就会显示为四分之一块的三角形。这样不借助图片，可以直接绘制出三角形了。

一个栗子：

<!DOCTYPE html PUBliC "-//W3C//DTD XHTML 1.0 Transitional//EN"

 "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">

<head>

<style type="text/css">

#triangle{

  height:0;

  width:0;

  border-top:solid 100px yellow;

  border-left:solid 100px purple;

  border-right:solid 100px purple;

  border-bottom:solid 100px yellow;

}

</style>

</head>

<body>

<div id="triangle"></div>

</body>

</html>

效果：

如果设置了块的宽高，还是会呈现边线的效果，每个边线将会是一个等腰梯形，类似于相框：

<!DOCTYPE html PUBliC "-//W3C//DTD XHTML 1.0 Transitional//EN"

 "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">

<head>

<style type="text/css">

#triangle{

  height:100px;

  width:100px;

  border-top:solid 100px yellow;

  border-left:solid 100px purple;

  border-right:solid 100px purple;

  border-bottom:solid 100px yellow;

}

</style>

</head>

<body>

<div id="triangle"></div>

</body>

</html>

效果：

利用这个原理，可以绘制不同形状的三角形，例如菜单上常用的右方向等腰直角三角形：

<!DOCTYPE html PUBliC "-//W3C//DTD XHTML 1.0 Transitional//EN"

 "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">

<head>

<style type="text/css">

#triangle{

  height:0;

  width:0;

  border-top:solid 100px rgba(0,0,0,0);

  border-left:solid 100px purple;

  border-bottom:solid 100px rgba(0,0,0,0);

}

</style>

</head>

<body>

<div id="triangle"></div>

</body>

</html>

another one:

<!DOCTYPE html PUBliC "-//W3C//DTD XHTML 1.0 Transitional//EN"

 "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">

<head>

<style type="text/css">

#triangle{

  height:0;

  width:0;

  border-right:solid 100px rgba(0,0,0,0);

  border-bottom:solid 100px yellow;

  border-left:solid 100px rgba(0,0,0,0);

}

</style>

</head>

<body>

<div id="triangle"></div>

</body>

</html>

图：

再来一个：

<!DOCTYPE html PUBliC "-//W3C//DTD XHTML 1.0 Transitional//EN"

 "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">

<head>

<style type="text/css">

#triangle{

  height:0;

  width:0;

  border-right:solid 50px rgba(0,0,0,0);

  border-bottom:solid 100px yellow;

  border-left:solid 50px rgba(0,0,0,0);

}

</style>

</head>

<body>

<div id="triangle"></div>

</body>

</html>

图图：

也可以使用css绘制三角形边线：

<!DOCTYPE html>

<html>

<head>

<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />

<title>border</title>

<style>

        .border{

                position:relative;

        }

        .border:after,.border:before{

                content:'';

                display:block;

                position:absolute;

                border-style:solid;

                border-width:20px;

        }

        .border:before{

                border-color:transparent transparent #333 transparent;

                left:20px;

                top:42px;

        }

        .border:after{

                border-color:transparent transparent #fff transparent;

                left:20px;

                top:45px

        }

</style>

</head>

<body>

        <div class="border"></div>

</body>

</html>

就到这里了，加油！每天进步一点点。

CSS用border绘制三角形的更多相关文章

  1. 通过CSS的border绘制三角形

    通过css的border 可以绘制出三角形, 不同的样式组合,有着不同的效果,可以控制它的大小,颜色,方向.看下面各种图形,相信可能还有很多图形,大家都没见过. 先写出公共的样式: .border { ...

  2. CSS之border绘制三角形

    用CSS的border可以画出高质量的三角形. 我们一般会这么使用border: #test-border { width: 100px; height: 100px; margin: 100px a ...

  3. css 利用border 绘制三角形. triangle

    1.基础三角形. <!DOCTYPE html> <html lang="en"> <head> <meta charset=" ...

  4. css中border画三角形

    <!doctype html><html lang="en"> <head>  <meta charset="UTF-8&quo ...

  5. CSS学习笔记：利用border绘制三角形

    在前端的笔试.面试过程中,经常会出现一些不规则图形的CSS设置,基本上多是矩形外加一个三角形.利用CSS属性可以实现三角形的生成,主要利用上下左右的边距的折叠. 1.第一种图形: .box { wid ...

  6. 用CSS的border画三角形

    用border画三角形,实际上属于一种奇淫巧技. 利用的是border的一个特性:当一个元素的宽高都为0时,给border设置宽度(至少给2个相邻的边框设置宽度),border就会撑开这个元素. 四个 ...

  7. border绘制三角形

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

  8. 利用css的border实现画三角形思路原理

    1.利用Css 的border绘制三角形的原理: div的border是有宽度和颜色的,当div的宽度比较大的时候,比如上面代码每个边100像素,颜色又不一样,浏览器怎么渲染颜色呢?经测试发现,宽度较 ...

  9. css中border制作各种形状

    css利用border制作各种形状的原理如图: 使用border绘制三角形是什么原理?事实上,宽度相等的border是以45度对接的,如下图: 没有了上border如图所示: 再设置border的宽度 ...

随机推荐

  1. Linux的软连接与硬链接

    Linux的软连接相当于window系统的快捷方式,如我们桌面的QQ等. 硬连接相当于复制一个文件,但不同的是两个文件内容同步.如创建一个文件A的硬连接B, 如果我修改A里面的内容,同时B中的内容也会 ...

  2. Android五：Activity

    生命周期: onCreate onStart onResume onPause:在该状态如果有优先级更高的程序,那此进程可能被kill;如果是被重新执行,则回到onResume状态. onStop : ...

  3. J2EE学习中一些值得研究的开源项(转)

    这篇文章写在我研究J2SE.J2EE近三年后.前3年我研究了J2SE的Swing.Applet.Net.RMI.Collections. IO.JNI……研究了J2EE的JDBC.Sevlet.JSP ...

  4. TCP非阻塞通信

    一.SelectableChannel SelectableChannel支持阻塞和非阻塞模式的channel 非阻塞模式下的SelectableChannel,读写不会阻塞 SelectableCh ...

  5. The tag 'ChartPlotter' does not exist in XML namespace

    本地build的时候每次都是OK的,但是Shelveset到Server上build的时候,总是出错. 果断google/bing了几个建议,无果. 不得不重新仔细的看server上的building ...

  6. C4.5决策树算法概念学习

    数据挖掘一般是指从大量的数据中自动搜索隐藏于其中的有着特殊关系性的信息的过程. •分类和聚类 •分类(Classification)就是按照某种标准给对象贴标签,再根据标签来区分归类,类别数不变. • ...

  7. codeforces 553A . Kyoya and Colored Balls 组合数学

    Kyoya Ootori has a bag with n colored balls that are colored with k different colors. The colors are ...

  8. Oracle11G登录时提示：ORA-12557： TNS：协议适配器不可加载

    原文 Oracle11G登录时提示:ORA-12557: TNS:协议适配器不可加载 初步分析是ORACLE_HOME设置错误引起的.前几天不小心看到系统环境变量中的其值为空,就手贱的加载了一个ora ...

  9. js 神代码

    eval(z='p="<"+"pre>"/* ,.oq#+ ,._, */;for(y in n="zw24l6k\ 4e3t4jnt4q ...

  10. NLog文章系列——如何配置NLog

    NLog支持以多种不同方式配置,目前同时支持直接编程和使用配置文件两种方法.本文将对目前支持的各种配置方式作详细描述. 日志配置 通过在启动的时候对一些常用目录的扫描,NLog会尝试使用找到的配置信息 ...