三角形实际上是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. gdg shell

    export TIMESTAMP=`date +%Y%m%d_%H%M%S`GDGFILE=file1_${TIMESTAMP}.txtsuffix=${GDGFILE#*_}prefix=${suf ...

  2. Android 使用ViewPager 做的半吊子的图片轮播

    Android 使用ViewPager 做的半吊子的图片轮播 效果图 虽然不咋样,但是最起码的功能是实现了,下面我们来一步步的实现它. 界面 下面我们来分析一下界面的构成 整体的布局: 因为我们要做出 ...

  3. 转Google Protocol Buffer 的使用和原理

    Google Protocol Buffer 的使用和原理 Protocol Buffers 是一种轻便高效的结构化数据存储格式,可以用于结构化数据串行化,很适合做数据存储或 RPC 数据交换格式.它 ...

  4. BZOJ 2002: [Hnoi2010]Bounce 弹飞绵羊 lct 动态树 splay

    http://www.lydsy.com/JudgeOnline/problem.php?id=2002 http://blog.csdn.net/frods/article/details/5224 ...

  5. Android源码目录结构详解

    Android 4.0|-- Makefile|-- bionic (bionic C库)|-- bootable (启动引导相关代码)|-- build (存放系统编译规则及generic等基础开发 ...

  6. RN生命周期

    网上看的博客,看着写的很好,想深入学RN的详细看下之后,再自己敲敲吧!有助于身体健康! 一个RN组件从它被加载,到最终被卸载会经历一个完整的生命周期.所谓生命周期,就是一个对象从开始生成到最后消亡所经 ...

  7. 关于List Map Set的线程安全的问题

    常见的ArrayList  LinkedList  HashMap TreeMap LinkedHashMap HashSet TreeSet LinkedHashSet 都是线程不安全的.如果要使用 ...

  8. 开发npm模块经验总结

    1.在windows下开发的package.json的bin链接的全局命令可能会在linux下报错:“没有那个文件或目录”之类的错误...此时可以在linux下用vim打开bin链接的js文件,设置s ...

  9. Linux终端（Xshell等）的编码设置

    先简单说说一下遇到的情况吧: 在用类似Xshell的工具连接远端Linux时,运行命令ls时,如果有中文,就会显示有乱码: 网上查资料时,也把相应的连接属性修改为utf-8了(见下图),但是还是不行: ...

  10. 【docker】docker启动、重启、关闭命令，附带：docker启动容器报错：docker: Error response from daemon: driver failed programming external connectivity on endpoint es2-node

    在关闭并放置centos 的防火墙重启之后[操作:https://www.cnblogs.com/sxdcgaq8080/p/10032829.html] 启动docker容器就发现开始报错: [ro ...