三角形实际上是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. C# 操作 access 数据库

    随笔: (1)   命名空间 using System.Data.OleDb; (2)   连接字符串 private staticstring connStr = @"Provider= ...

  2. [ 原创 ] git使用技巧

    Git的使用--如何将本地项目上传到Github Git分支图介绍 https://www.cnblogs.com/cheneasternsun/p/5952830.html https://www. ...

  3. python opencv3 特征提取与描述 DoG SIFT hessian surf

    git:https://github.com/linyi0604/Computer-Vision DoG和SIFT特征提取与描述 # coding:utf-8 import cv2 # 读取图片 im ...

  4. django信号调度的用法

    Django中提供了"信号调度",用于在框架执行操作时解耦. 一些动作发生的时候,系统会根据信号定义的函数执行相应的操作 Django中内置的signal Model_signal ...

  5. BZOJ.2428.[HAOI2006]均分数据(随机化贪心/模拟退火)

    题目链接 模拟退火: 模拟退火!每次随机一个位置加给sum[]最小的组. 参数真特么玄学啊..气的不想调了(其实就是想刷刷最优解) 如果用DP去算好像更准.. //832kb 428ms #inclu ...

  6. Java 接口与抽象类

    抽象类 <JAVA编程思想>一书中,将抽象类定义为"包含抽象方法的类".只要用abstract修饰的类就是抽象类,抽象类不一定包含抽象方法,但有抽象方法的类一定是抽象类 ...

  7. bestcoder#23 1001 Sequence

    Sequence Time Limit: 2000/1000 MS (Java/Others)    Memory Limit: 32768/32768 K (Java/Others)Total Su ...

  8. org.springframework.orm.hibernate3.LocalSessionFactoryBean

    Spring整合hibernate在配置sessionFactory时, 启动总是报出javax.transaction.TransactionManager找不到. 原因是:缺少jar包,jta-1 ...

  9. ThinkPHP使用纯真IP获取物理地址时中文乱码问题

    今天在用ThinkPHP通过纯真IP获取地址时,发现输出结果中文乱码,如图: 经查发现ThinkPHP的IpLocation.class.php类文件中说明:“由于使用UTF8编码 如果使用纯真IP地 ...

  10. Word文档中的语法高亮显示代码

    有时候我们程序员也需要在word文档里面显示代码,但是直接复制过去 不好看,格式也不太对,这里给大家分享一个Word文档中的语法高亮显示代码的方法 http://www.planetb.ca/synt ...