1. 画三角

<!DOCTYPE html>

<html>

<head>

    <title></title>

    <meta charset="utf-8">

    <style type="text/css">

    .triangle {

        width: 0;

        height: 0;

        border: solid;

        border-width:100px 100px 100px 100px;

        border-color:transparent transparent bule transparent;

    }

    </style>

</head>

<body>

    <div class="triangle"></div>

</body>

</html>

结果如下

（边框颜色border-color四个值默认的加载方向，top right bottom left）：

宽高为0时：

2. 画一个矩形

把上述的left/right/top/bottom去掉任意一边，然后把颜色都设成蓝色不就行了

.rectangle {

        background-color: red;

        width: 0;

        height: 0;

        border: solid;

        border-width:0px 100px 100px 100px;

        border-color:blue;

    }

3. 画一条线

如图所示是一条长200px, 粗0.5px的线。

.line {

        width: 0px;

        height: 0px;

        border: solid;

        border-width:0 100px 0.5px 100px;

        border-color:red;

    }

4. 画一个圆

使用到border-radius.

<!DOCTYPE html>

<html>

<head>

    <title>画一个圆，圆心有字</title>

    <meta charset="utf-8">

    <style type="text/css">

        .circle {

            width: 100px;

            height: 100px;

            border: solid 2px;

            border-radius: 50px;

            /*background-color: red;*/

            text-align: center;

            line-height: 100px;//这样才能使文字处于圆心处

            background: rgba(255, 0, 0, 1)/*设置透明度*/

        }

    </style>

</head>

<body>

    <div class="circle">圆心</div>

</body>

</html>

RGB就是红色R+绿色G+蓝色B，RGBA说得简单一点就是在RGB的基础上加进了一个通道Alpha.

语法: 以上R、G、B三个参数，正整数值的取值范围为：0 - 255。

R：红色值。正整数 | 百分数

G：绿色值。正整数 | 百分数

B：蓝色值。正整数| 百分数

A：透明度。取值0~1之间

用div画三角/矩形/圆的更多相关文章

  1. 前端知识总结--css用div画环形圆

    如何用最少的div画最多的环形?如下图所示最少需要多少个div? 暂时想到的利用div的边框.内外阴影及befor和after的伪元素实现 以下代码可以实现上图效果: <style> di ...

  2. 用css控制一个DIV画图标。

    在实际开发中,我们会用到一些小图形,图标.大多数情况下都是用图片来实现的,同时对图片进行处理使图片大小尽可能的缩小.但是图片在怎么处理也是按KB来算的.但是要是用CSS画,只要用很少的空间就能完成同样 ...

  3. WEB前端面试题 分别使用2个、3个、5个DIV画出一个大的红十字

    <!DOCTYPE html> <!--两个DIV--> <html> <body> <div style="width:100%;he ...

  4. css+div制作圆角矩形的四种方法

    圆角矩形一向是设计师最倾心的一种设计,因为他们可以让整个网页生动起来,不那么死板,所以,作为一个优秀的网页设计师,学会一种或多种编辑圆角矩形的方法是必不可少的,而且圆角矩形应用范围极广,一个网页内的所 ...

  5. bullet物理引擎与OpenGL结合 导入3D模型进行碰撞检测 以及画三角网格的坑

    原文作者:aircraft 原文链接:https://www.cnblogs.com/DOMLX/p/11681069.html 一.初始化世界以及模型 /// 冲突配置包含内存的默认设置,冲突设置. ...

  6. LCD编程_画点线圆

    上篇博客中进行了lcd的简单测试,这篇博客将进行更加复杂的测试——画点.画线.画圆.画线和画圆是在画点的基础上实现的,因此本篇博客重点实现画点操作. 先抛出这样的一个问题,已知: (x,y)的坐标: ...

  7. C# 从零开始写 SharpDx 应用 画三角

    原文:C# 从零开始写 SharpDx 应用 画三角 版权声明:博客已迁移到 https://blog.lindexi.com 欢迎访问.如果当前博客图片看不到,请到 https://blog.lin ...

  8. 2018-9-30-C#-从零开始写-SharpDx-应用-画三角

    title author date CreateTime categories C# 从零开始写 SharpDx 应用 画三角 lindexi 2018-09-30 18:30:14 +0800 20 ...

  9. Canvas 如何画一个四分之一圆

    转: Canvas 如何画一个四分之一圆 HTML: Document JS: var c = document.getElementById('ctx') var ctx = c.getContex ...

随机推荐

  1. python进程和线程（五）

    python的进程 由于GIL的存在,python中的多线程其实并不是真正的多线程,如果想要充分地使用多核CPU的资源,在python中大部分情况需要使用多进程.Python提供了非常好用的多进程包m ...

  2. 为什么分库分表使用2的N次方 一个字节用两位16进制

    你说说为神马表的总数.redis库的总数.HashMap的数量最好是2的N次方 数据在表库HashMap 落地时候都会跟总数取模,这个我们做个测试 假设数量是2的3次方就是8,即索引就是0-7 php ...

  3. PyCharm：选择性忽略 PEP8 警告

    PyCharm 是个很强大的 python IDE,PEP 8 的告警提示也很好用,但是函数名不能包含大写字母等少数几个规范真心觉得不好,作为一名处女座强迫症患者,代码下面的波浪线这种东西是绝对不允许 ...

  4. BugkuCTF~代码审计~WriteUp

    第一题:extract变量覆盖 知识简介 extract()函数语法: extract(array,extract_rules,prefix) 参数 描述 array必需. 规定要使用的数组. ext ...

  5. python类属性用法总结

    属性的定义:python中的属性其实是普通方法的衍生. 操作类属性有三种方法: 1.使用@property装饰器操作类属性. 2.使用类或实例直接操作类属性(例如:obj.name,obj.age=1 ...

  6. LeetCode矩阵题型

    以三角形遍历矩阵 ; i < matrix.size(); ++i) { ; j < matrix[i].size(); ++j) swap(matrix[i][j], matrix[j] ...

  7. [转]koa 实现 jwt 认证

    本文转自:https://blog.csdn.net/qq673318522/article/details/78641136 关于 Token 认证机制,这里不做更多解释.不清楚的可以看我的这篇文章 ...

  8. (摘)C#生成随机数的三种方法

    随机数的定义为:产生的所有数字毫无关系. 在实际应用中很多地方会用到随机数,比如需要生成唯一的订单号. 在C#中获取随机数有三种方法: 一.Random 类 Random类默认的无参构造函数可以根据当 ...

  9. I/O输出流基础之FileOutputStream

    OutputStream:是所有字节输出流的父类,其作用是:用这个流把网络数据(getOutputStream()),或者内存中的字节数组数据写到文件系统中文件系统(FileOutputStream) ...

  10. Entity Framework (EF) Core工具创建一对多和多对多的关系

     一. EntirtyFramework(EF)简介 EntirtyFramework框架是一个轻量级的可扩展版本的流行实体框架数据访问技术,微软官方提供的ORM工具让开发人员节省数据库访问的代码时间 ...