三角形实际上是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. BZOJ.2916.[POI1997]Monochromatic Triangles(三元环)

    题目链接 \(Description\) n个点的完全图,其中有m条边用红边相连,其余边为蓝色.求其中三边同色的三角形个数. \(Solution\) 直接求同色 除了n^3 不会.. 三角形总数是C ...

  2. bzoj 3209 数位DP+欧拉定理

    枚举1的个数,统计有那么多1的数的个数 /************************************************************** Problem: 3209 Us ...

  3. PYQT设计无边框窗体

    #UI.py,通过UI设计师制作后直接转换为UI.py脚本 # -*- coding: utf-8 -*-from PyQt4 import QtCore, QtGui try:    _fromUt ...

  4. 通过IP获取所在城市

    <script type="text/javascript"> var map = new BMap.Map("allmap"); var poin ...

  5. MVC之Global.asax解析

    大家看到上面的代码了,Application_Start大家都知道这是应用程序启动入口. AreaRegistration.RegisterAllAreas是什么呢? 我们先看看微软官方的注解: 我们 ...

  6. AbstractAction

    package cn.tz.action.abs; import java.io.File; import java.io.IOException; import java.text.SimpleDa ...

  7. ServletActionContext.getRequest().getSession() 和 ActionContext.getContext().getSession()

    ActionContext.getContext().getSession(); 这个方法获取的session是struts封装过的一个Map类型的session,只能调用put()方法缓存数据. S ...

  8. centos7 通过kvm+vnc 实现远程桌面虚拟化和创建windows、Linux虚拟机

    感谢朋友支持本博客.欢迎共同探讨交流,因为能力和时间有限.错误之处在所难免,欢迎指正! 假设转载.请保留作者信息. 博客地址:http://blog.csdn.net/qq_21398167 原博文地 ...

  9. DU 4609 3-idiots FFT

    题意还是比较好懂. 给出若干个木棍的长度,问这些木棍构成三角形的可能性. 那么公式很容易知道 就是这些木棍组成三角形的所有情况个数 除以 从n个木棍中取3个木棍的情况数量C(n, 3) 即可 但是很显 ...

  10. Apache Mina入门

    Mina第一次听到这个名称的时候,我以为是个MM的名字米娜,后来才知道… Apache MINA(Multipurpose Infrastructure for Network Application ...