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. 【专题教程第8期】基于emWin模拟器的USB BULK上位机开发，仅需C即可，简单易实现

    说明:1.如果你会emWin话的,就可以轻松制作上位机.做些通信和控制类上位机,比使用C#之类的方便程度一点不差,而且你仅会C语言就可以.2.并且成功将emWin人性化,可以做些Windows系统上的 ...

  2. Entity Framework Core 2.1，添加种子数据

    EFCore 2.1出来有一段时间了,里面的新功能还没怎么用,今天研究下如何使用EF Core 2.1添加种子数据. 这部分的官方文档地址是:https://docs.microsoft.com/en ...

  3. qml demo分析(customgeometry-贝塞尔曲线)

    一.效果展示 本篇文章还是带来一个简单的qt示例分析,且看图1效果. 图1 贝塞尔曲线 二.源码分析 该示例代码所在目录quick\scenegraph\customgeometry,感兴趣的同学可以 ...

  4. springboot~mybatis里localdatetime序列化问题

    问题起因 主要是使用mybatis作为ORM之后,返回的对象为Map,然后对于数据库的datetime,datestamp类型返回为时间戳而不是标准的时间,这个问题解决方案有两种,大叔分析一下: 在m ...

  5. 微信公众号开发C#系列-7、消息管理-接收事件推送

    1.概述 在微信用户和公众号产生交互的过程中,用户的某些操作会使得微信服务器通过事件推送的形式通知到开发者在开发者中心处设置的服务器地址,从而开发者可以获取到该信息.其中,某些事件推送在发生后,是允许 ...

  6. SpringCloud微服务如何优雅停机及源码分析

    目录 方式一:kill -9 java进程id[不建议] 方式二:kill -15 java进程id 或 直接使用/shutdown 端点[不建议] kill 与/shutdown 的含义 Sprin ...

  7. C# 读取PDF多级书签

    在PDF中,书签作为一种导航的有效工具,能帮助我们快速地定位到文档中的指定段落.同时,书签也能让人对文档结构一目了然,在某种程度上也可作为目录使用.对于C#操作PDF中的书签,在上一篇文章中介绍了具体 ...

  8. Java_基础篇（数组排序）

    Java_基础之数组排序(从小到大) 1.冒泡排序: 冒泡排序可以写成两层循环. 每次循环将最大的数值交换到数组的最后一个. 每排序完一次,后面就少比较一次.所以二层循环的判断条件写成:arry.le ...

  9. Java开发笔记（八十四）文件与目录的管理

    程序除了处理内存中的数据结构,还要操作磁盘上的各类文件,这里的磁盘是个统称,泛指可以持久保留数据的存储介质,包括但不限于:插在软驱中的软盘.固定在机箱中的硬盘.插在光驱中的光盘.插在USB接口上的U盘 ...

  10. 折腾Java设计模式之迭代器模式

    迭代器模式 Provide a way to access the elements of an aggregate object sequentially without exposing its ...