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优化二之锁机制

    mysql优化二之锁机制 mysql提供了锁机制和MVCC机制来保证并发操作的安全性,这里主要讨论锁机制, MVCC见下篇文章 mysql的锁按照锁粒度可分为行锁与表锁,按照操作类型划分可读锁和写锁 ...

  2. android客户端向服务器发送请求中文乱码的问

    android客户端向服务器发送请求的时候,并将参数保存到数据库时遇到了中文乱码的问题: 解决方法: url = "http://xxxx.com/Orders/saveorder.html ...

  3. OA发展史：由点到生态

    在当今无边界组织的商业背景下,企业与员工关系已经转化为联盟关系,以往通过工作场所.劳动合同等约束的形式已经逐步弱化,管理行为空前复杂,OA正是将一个个散点整合起来的看不见的手.那么,推动OA发展的核心 ...

  4. （二）surging 微服务框架使用系列之surging 的准备工作consul安装

    suging 的注册中心支持consul跟zookeeper.因为consul跟zookeeper的配置都差不多,所以只是consul的配置 consul下载地址:https://www.consul ...

  5. c++随机排序容器中的元素

    在各种程序语言中都提供了将容器元素随机排序的shuffle方法,c++也不例外. 不过c++将shuffle放在了<algorithm>中而不是像其他语言一样在random里,同时c++1 ...

  6. sql学习笔记（三）—— 联表查询

    上篇写了一些sql查询的知识,这篇接着写一下有关联表查询的知识. 既然是联表查询,那肯定得多个表啊,所以,我们先创建一个教师表,表名为 teacher,并且向表中插入数据. 准备工作: 创建表语句: ...

  7. javascript 倒计数功能

    最近在项目中遇到一个倒计时功能,在网上没有找到合适的,就自己写了个方法.贴在这里,权且当个记录. export const timeRun = (timeStr, callBack) => { ...

  8. c#上位机与三菱PLC(FX3U)串口通讯

    项目中会经常用到上位机与PLC之间的串口通信,本文介绍一下C#如何编写上位机代码 与三菱FX3U进行通讯 1. 第一种方法是自己写代码实现,主要代码如下: //对PLC的Y7进行置1 byte[] Y ...

  9. DRDS分布式SQL引擎—执行计划介绍

    摘要: 本文着重介绍 DRDS 执行计划中各个操作符的含义,以便用户通过查询计划了解 SQL 执行流程,从而有针对性的调优 SQL. DRDS分布式SQL引擎 — 执行计划介绍 前言 数据库系统中,执 ...

  10. 如何将workerman部署到windows服务器上面

    一直以来对php的即时通讯都很好奇,其实是不知道应该怎么来实现,后来了解到了swoole和workerman这两个神器,他们都可以实现即时通信的功能,其中swoole是C语言编写的php扩展,其配置起 ...