CSS画三角形教程

网页因为 CSS 而呈现千变万化的风格。这一看似简单的样式语言在使用中非常灵活，只要你发挥创意就能实现很多比人想象不到的效果。特别是随着 CSS3 的广泛使用，更多新奇的 CSS 作品涌现出来。

操作方法

  • 01

    打开sublime编辑器，新建一个html文件

  • 02

    建好了之后在<head></head>之间把样式写出来，这里先写一个向上的三角形样式 代码如下： .san { width: 0; height: 0; border-left: 50px solid transparent; border-right: 50px solid transparent; border-bottom: 100px solid #ff0066; }

  • 03

    在<head></head>里面写好样式后，我们在<body></body>来写个div标签，代码如下 <div class="san"> </div>

  • 04

    写好之后，我们在浏览器中查看，效果如下所示。

  • 05

    继续画左右下的三角形 代码如下： <html> <head> <meta charset="UTF-8"> <title>Document</title> <style type="text/css"> * {margin: 50px auto;} /* 上 */ .san_shang { width: 0; height: 0; border-left: 50px solid transparent; border-right: 50px solid transparent; border-bottom: 100px solid #ff0066; } /* 下 */ .san_xia { width: 0; height: 0; border-left: 50px solid transparent; border-right: 50px solid transparent; border-top: 100px solid red; } /* 左 */ .san_zuo { width: 0; height: 0; border-left: 50px solid transparent; border-right: 50px solid transparent; border-top: 100px solid #333; } /* 右 */ .san_you { width: 0; height: 0; border-top: 50px solid transparent; border-right: 100px solid #0066ff; border-bottom: 50px solid transparent; } </style> </head> <body> <!-- 上 --> <div></div> <!-- 下 --> <div></div> <!-- 左 --> <div></div> <!-- 右 --> <div></div> </body> </html>

  • 06

    最后在浏览器里预览的效果如下：

赞 (0)

相关推荐

  • wps怎么画直角三角形图形? wps画三角形的教程

    wps中想要插入一个直角三角形,该怎么绘制直角三角形呢?下面我们就来看看wps画直角三角形的教程. 1.打开wps软件,进入其主界面: 2.在菜单栏中选择插入: 3.在插入菜单的工具中选择形状: 4. ...

  • caxa怎么画三角形并标注角度?

    caxa画了一个三角形,想要标注三角形的三个角度,该怎么标注呢?下面我们就来看看详细的教程. 1.在caxa2013界面内点击[新建]工具. 2.在弹出的[新建]窗口中国单击[BLANK]选项. 3. ...

  • Word2017怎么使用剪贴画中的图形? word插入剪贴画的教程

    word2017中想要使用剪贴画,该怎么插入呢?下面我们就来看看详细的教程. 1.将插入点定于要插入剪辑画的位置. 2.然后在菜单栏中点击[插入]选项卡. 3.在 [插入]选项卡下找到[剪贴画]按钮. ...

  • WPS怎么画烟斗图形? wps绘制烟斗简笔画的教程

    wps中想要画一个烟斗图形,该怎么画呢?其实就是花了几个图形组成的,下面我们就来看看详细的教程. 1.在新建的文档中,使用[插入][形状][同心圆],先在空白处画出一个[同心圆],作为烟斗的烟口部分. ...

  • ppt2007使用曲线工具和任意曲线工具画曲线教程

    ppt如何画曲线?PPT的自选图形工具里有曲线工具和任意曲线工具,可以根据需要进行选择使用.接下来我们小编带你熟悉一下这两种工具的用法,教大家在ppt2007中如何使用曲线工具和任意曲线工具画曲线,感 ...

  • 卷轴画制作教程

    卷轴画制作教程

    相信很多小伙伴在日常生活中都会接触到卷轴画,那么我们有没有想过自己来制作卷轴画呢?下面小编就来为大家介绍它的制作教程.具体如下:1. 首先打开"Photoshop",在其中打开我们 ...

  • 如何画三角形外接圆？

    如何画三角形的外接圆呢?根据外心的性质,要画出两条边的垂直平分线.利用几何画板可以画出线段的中点和垂线因此就可以画出三角形各边的中垂线了.本文教你使用几何画板画出三角形的外接圆. 操作方法 01 在工 ...

  • ai如何指定角度画三角形？自定义角度绘制三角形

    在illustrator中怎么规定角度来画三角形?比如,要绘制钝角三角形,又或是绘制锐角三角形:本文给大家分享其中的操作方法,给朋友们参考参考. 操作方法 01 比如,要绘制一个110度的钝角三角形. ...

  • ps画虚线教程

    ps画虚线教程 操作方法 01 启动pscs5软件,执行文件--新建命令,创建空白文档,并填充白色,参数如下图所示 02 然后再背景图层上面,新建一个透明图层---图层1 03 然后再选择工具箱中的矩 ...