三角形实际上是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. Kubernetes(k8s)集群部署（k8s企业级Docker容器集群管理）系列之flanneld网络介绍及部署（三）

    0.前言 整体架构目录:ASP.NET Core分布式项目实战-目录 k8s架构目录:Kubernetes(k8s)集群部署(k8s企业级Docker容器集群管理)系列目录 一.flanneld介绍 ...

  2. python的可变与不可变数据类型

    <python的可变与不可变数据类型>     python与C/C++不一样,它的变量使用有自己的特点,当初学python的时候,一定要记住“一切皆为对象,一切皆为对象的引用”这句话,其 ...

  3. android handler messageQueue，looper

    韩梦飞沙  韩亚飞  313134555@qq.com  yue31313  han_meng_fei_sha 处理器获取 当前线程中的 循环器对象, 循环器 从 消息队列中 取出 消息, 给 处理器 ...

  4. [Arc058E] Iroha and Haiku

    [Arc058E] Iroha and Haiku 题目大意 问有多少\(n\)个数的正整数序列,每个数在\([1,10]\)之间,满足存在\(x,y,z,w\)使得\(x\to y-1,y\to z ...

  5. 【dijkstra优化/次短路径】POJ3255-Roadblocks

    [题目大意] 给出一张无向图,求出从源点到终点的次短边. [思路] 先来谈谈Dijkstra的优化.对于每次寻找到当前为访问过的点中距离最短的那一个,运用优先队列进行优化,避免全部扫描,每更新一个点的 ...

  6. python调用matlab

    官网链接: https://ww2.mathworks.cn/help/matlab/matlab_external/call-user-script-and-function-from-python ...

  7. bzoj 4034

    我写的是 DFS序+线段树 DFS序(出去的位置要单独建点)上,进入的位置是权值,出去的位置是权值的相反数,可以证明节点i到根节点的路径上的点的权值和是DFS序上1-in[i]的和. 只要搞出每个区间 ...

  8. Ruby on rails配置环境问题【慢慢添加】

    1,  ruby -v  与 rvm list 显示不同的版本号 ,使用rvm use 2.2.3后,报如下错误: RVM is not a function 解决办法: $ source ~/.rv ...

  9. Python知识(7)--最小二乘求解

    这里展示利用python实现的最小二乘的直接求解方法.其求解原理,请参考:最小二乘法拟合非线性函数及其Matlab/Excel 实现 1.一般曲线拟合 代码如下: # -*- coding:utf-8 ...

  10. 装了wamp之后，80端口被占用解决办法

    1.如果装了IIS,那么把IIS停掉. 2.如果装了sqlserver,那么在cmd里面执行命令:services.msc,进入服务里面,把SQL Server Reporting Services ...