三角形实际上是border的产物 我们正常使用的border都是四边一个颜色，当我们把四边换上不同颜色 那么你就会发现，三角来了~！

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>css3三角形画法</title>

    <style>

        .content{

            width: 0px;

            height: 0px;

            margin: 50px auto 0px;

            border-width: 150px;

            border-color: #666 #CC0066 #CC9966 #FFCC33;

            border-style: solid;

        }

    </style>

</head>

<body>

    <div class="content"></div>

</body>

</html>

　　原来border每个边，形成了三角形。 之前一直很奇怪，为什么每次width 和 height 都是0px? 我想原因已经不言而喻。 当然我们应该试一下看看 ~

　　可以给加上padding：50px；中间的白色区域就是100px

　　再加上border-radius：50%；会变成这样

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>css3三角形画法</title>

    <style>

        .content{

            width: ;

            height: ;

            margin: 50px auto 0px;

            /*没有修改width 和 height 而是用了padding*/

            padding: 50px;

            border-width: 150px;

            border-color: # #CC0066 #CC9966 #FFCC33;

            border-style: solid;

            /*还可以把border-radius设置一个玩玩*/

            -webkit-border-radius: %;

            -moz-border-radius: %;

            border-radius: %;

        }

    </style>

</head>

<body>

<div class="content"></div>

</body>

</html>

　　我们看到了三角，却拿不到三角？ 很简单，我们知道border-color 值对应的边分别为 top 、right、bottom、left ；现在我们不想要那个，就把那个边透明。

　　当然我们要的三角通常不是这样的，现在，我们只要让border-color和border-width搭配，就可以变换各种三角。

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>css3三角形画法</title>

    <style>

        .outer{

            display: inline-block;

            margin: 50px;

            text-align: center;

            font-size: 24px;

            line-height: 40px;

        }

        .content{

            width: ;

            height: ;

            border-style: solid;

        }

        .content-{

            /*不要上面的三角 同时左边和右边不要有颜色 就是可爱的正三角*/

            border-width: 0px 100px 100px 100px;

            border-color: transparent transparent #CC9966 transparent;

        }

        .content-{

            /*左边的三角 就是右边的不要了 上下三角透明 一点毛病都没有*/

            border-width: 100px 0px 100px 100px;

            border-color: transparent transparent transparent #CC9966;

        }

        .content-{

            border-width: 100px 100px 100px 100px;

            border-color: transparent #CC9966 #CC9966 transparent;

        }

    </style>

</head>

<body>

<div class="outer">

    <div class="content content-1"></div>

    <div>下三角</div>

    <div class="content content-2"></div>

    <div>左三角</div>

    <div class="content content-3"></div>

    <div>右直三角</div>

</div>

</body>

</html>

　　注意：如果是采用border-weight不变，使对应的边的color透明的话，那么就是边框的尺寸会不变。

　　至于正三角、不规则三角等，只要知道它的原理，都是很可以画出来的

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>css3三角形画法</title>

    <style>

        div{

            width: 0px;

            height: 0px;

            border-style: solid;

            margin: 30px auto 0px;

        }

        .content-{

             /*梯形借助了padding*/

            padding: 10px 20px;

            border-width: 0px 50px 50px 50px;

            border-color: transparent transparent #CC9966 transparent;

        }

        .content-{

            /*padding做梯形*/

            padding: 20px 10px;

            border-width: 50px 50px 50px 0px;

            border-color: transparent #CC9966 transparent transparent;

            /*喇叭效果*/

            -webkit-box-shadow: inset 15px  #;

            -moz-box-shadow: inset 15px  #;

            box-shadow: inset 15px  #;

        }

        .content-{

            width: 100px;

            height: 100px;

            background-color: #CC9966;

            border:none;

            /*平行四边行完全可以用旋转实现*/

            -webkit-transform: skew(-30deg);

            -moz-transform: skew(-30deg);

            -ms-transform: skew(-30deg);

            -o-transform: skew(-30deg);

            transform: skew(-30deg);

        }

    </style>

</head>

<body>

<body>

    <div class="content-1"></div>

    <div class="content-2"></div>

    <div class="content-3"></div>

</body>

</body>

</html>

CSS深入了解border：利用border画三角形等图形的更多相关文章

  1. css伪元素before/after和画三角形的搭配应用

    想要实现的效果如下: 第一步:如何用css画出三角形? /* css画三角形 */ .sanjiao{ ; border-top:40px solid red; border-bottom:40px ...

  2. assembly x86(nasm)画三角形等图形的实现（升级版）

    https://www.cnblogs.com/lanclot-/p/10962702.html接上一篇 本来就有放弃的想法,可是有不愿退而求次, 然后大神室友写了一个集海伦公式计算三角形面积, 三点 ...

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

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

  4. 用CSS border相关属性画三角形

    效果 watermark/2/text/aHR0cDovL2Jsb2cuY3Nkbi5uZXQva2l3aV9jb2Rlcg==/font/5a6L5L2T/fontsize/400/fill/I0J ...

  5. 用border或者div制作三角形等图形

    一般情况下, 我们设置盒子的宽高度, 及上下左右边框, 具体代码如下: 通过上述代码,div的具体样式如下: 现在在上面基础上, 我们把div的宽高度都设为0时, 现在我们再次查看效果,如下图: 这时 ...

  6. assembly x86(nasm)画三角形等图形的实现

    参考了一位大佬的博客 https://blog.csdn.net/qq_40298054/article/details/84496944传送门 https://blog.csdn.net/qq_40 ...

  7. WebGl 利用drawArrays、drawElements画三角形

    效果: 代码: <!DOCTYPE html> <html lang="en"> <head> <meta charset="U ...

  8. css3画三角形的原理

    以前用过css3画过下拉菜单里文字后面的“下拉三角符号”,类似于下面这张图片文字后面三角符号的效果 下面是一个很简单的向上的三角形代码 #triangle-up { width: 0; height: ...

  9. 利用border和伪类画出三角形 ps：好久没写博客了。。。

    有一个半月没有写博客了,这段时间,小哥我经历了自入行前端最为黑暗的时期,迷茫,空虚,不想写代码,不想做研究了.连打游戏都没有兴趣,如同行尸走肉一般.还好,毕业论文的初稿完成后,整个时间段最恶心最难熬的 ...

随机推荐

  1. Linux进程管理子系统

    <进程要素> <进程与程序的区别> 程序: 存放在硬盘上一些列代码和数据的可执行映像,是一个静止的实体 进程: 是一个执行中的程序,是动态的实体 <进程4要素> 1 ...

  2. 数据储存为base64编码，如何实现模糊搜索

    假设字段title存储的是经过base64编码后的字符串,$key是存搜索关键字的变量 则普通的查询方法, select * from 表名 where title like '$key'; 无法正确 ...

  3. 写在OI退役后和高中毕业前的一些话

    更新日志: 2017.02.13 开坑 2017.02.13 更新[零][壹] 2017.02.14 更新[贰] 2017.02.26 更新[叁][肆] 2017.03.04 锅多如狗,停更一周 20 ...

  4. java知识点总结

    一.java 1.容器 1)List Java中ArrayList和LinkedList区别 2)Set 理解HashSet及使用 HashMap和HashSet的区别 3Map HashMap的容量 ...

  5. [POI2015]Logistyka

    [POI2015]Logistyka 题目大意: 一个长度为\(n(n\le10^6)\)的数列\(A_i\),初始全为\(0\).操作共\(m(m\le10^6)\)次,包含以下两种: 将\(A_x ...

  6. ROS知识(12)----cv_bridge依赖opencv版本的问题

    cv_bridge默认依赖的oencv版本是2.4.8,如果安装了新的opencv版本,比如2.4.11,那么在编译cv_bridge时候会提示无法找到opencv 2.4.8.so的库. 为解决这个 ...

  7. [Linux] VIM Practical Note

    Practical Vim 文件 1.1. 管理多个文件 1.1.1. 缓冲区 • :ls • 查看缓冲区列表 • :bprev • 前一项 • :bnext • 后一项 • :bfirst • 第一 ...

  8. POJ 1470 Closest Common Ancestors （LCA，离线Tarjan算法）

    Closest Common Ancestors Time Limit: 2000MS   Memory Limit: 10000K Total Submissions: 13372   Accept ...

  9. TPS70345 (ACTIVE) 双路输出低压降 (LDO) 稳压器

    The TPS703xx family of devices is designed to provide a complete power management solution for TI DS ...

  10. make mrproper and make clean

    make mrproper命令会删除所有的编译生成文件.内核配置文件(.config文件)和各种备份文件,所以几乎只在第一次执行内核编译前才用这条命令. make clean命令则是用于删除大多数的编 ...