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. MySQL学习（二）索引与锁 --- 2019年1月

    1.Order By 是怎么工作的 MySQL做排序是一个成本比较高的操作.MySQL会为每个线程分配一个 sort_buffer 内存用于排序,该内存大小为 sort_buffer_size. 全字 ...

  2. LogUtil【实现自由的控制日志的打印的封装类】

    版权声明:本文为HaiyuKing原创文章,转载请注明出处! 前言 主要用于控制项目开发和上线阶段日志的打印. 效果图 暂不需要. 代码分析 在LogUtil类中声明代表不同日志级别的常量值(VERB ...

  3. springboot~添加新模块的方法

    在springboot项目框架里,把一个项目两大模块,主项目main和测试项目test,而我们的测试项目根据功能又可以再分,比如可以有单元测试,集成测试,业务测试等等. 对于一个初学者来说,建立模块的 ...

  4. Docker进阶之二:Docker内部组件

    Docker内部组件 一.Namespaces 命名空间,Linux内核提供的一种对进程资源隔离的机制,例如进程,网络,挂载点等资源.    docker run -d busybox ping ba ...

  5. 【带着canvas去流浪（6）】绘制雷达图

    目录 一. 任务说明 二. 重点提示 三. 示例代码 示例代码托管在:http://www.github.com/dashnowords/blogs 博客园地址:<大史住在大前端>原创博文 ...

  6. jQuery获取或设置元素的宽度和高度

    jQuery获取或设置元素的宽度和高度: 可使用以下3种方法: 1,jQuery width() 和 height() 方法: 2,innerWidth() 和 innerHeight() 方法: 3 ...

  7. PHP正则表达式二分法实现mysql盲注脚本

    $sUrl = 'xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx'; $sPost = 'inject=Inject&injection='; $sCharset = 'AB ...

  8. 类和对象，以及 LeetCode 每日一题

    所有类都是引用类型. 1 定义类 类是某一批对象的抽象. 1.1 定义类的语法: [修饰符] class 类名{ 零到多个构造器定义 零到多个成员变量 零到多个方法 } 对于一个类定义而言,可以包含三 ...

  9. web前端图片上传(3)--filereader

    这篇文章主要是为了介绍一种文件上传的方式.当然文件中是包含图片的.如果大家仔细看我的第一篇web前端图片上传(1)就会知道,其实也是按照这种方式上传你的,但是由于上次时间比较紧张,没有详细的介绍今天的 ...

  10. Vue 单选框与单选框组 组件

    radio组件 v-model  : 通过当然绑定的值与input上的value值来确定当前选中项. 在父作用域中通过active设置当前默认选中项,如果选中项发生改变后通过input事件通知传递到父 ...