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. Android 音视频开发学习思路

    Android 音视频开发这块目前的确没有比较系统的教程或者书籍,网上的博客文章也都是比较零散的.只能通过一点点的学习和积累把这块的知识串联积累起来. 初级入门篇: Android 音视频开发(一) ...

  2. dubbo 序列化机制之 hessian2序列化实现原理分析

    对于远程通信,往往都会涉及到数据持久化传输问题.往大了说,就是,从A发出的信息,怎样能被B接收到相同信息内容!小点说就是,编码与解码问题! 而在dubbo或者说是java的远程通信中,编解码则往往伴随 ...

  3. CMake安装grpc生成gRPCTargets.cmake文件

    以下是安装语句: cd grpc_folder git submodule update --init cmake .. make -j 4 sudo make install 然而编写依赖gRPC的 ...

  4. 如何机智判断页面是刷新还是关闭，背景：vue项目，需求：关闭页面，下次直接跳到登陆页

    最近项目有这么个需求:要在关闭当前系统的窗口的时候,退出登录, 因为如果不退出登录可能存在安全风险,其实我想说,电脑没事别借给别人活着离开工位记得一定要锁屏,其实我们设置了cookie失效时间的,过了 ...

  5. DotNetCore跨平台~为debain系统添加阿里云加速

    回到目录 直接把它阿里云的镜像覆盖到原来的/etc/apt/sources.list文件 cat > /etc/apt/sources.list << EOF deb http:// ...

  6. Java代码登录拦截器例子

    通常我们在点击某个按钮的时候,对某个对象进行操作,是需要登陆才能做的,这时候就需要一个拦截器对某个方法进行拦截, 比如你在一个图书管理中心中你要借书,这时候你就会被要求出示借书证,管理员才能借书给你. ...

  7. vue的父子组件间的相互传参props及props数据的多种验证机制

    感觉自己即将完全步入前端大军,后台老板都不需要我弄了,塞翁失马...时间会告诉我们是好是坏 好了言归正传,最近vue是搞的不亦乐乎啊,下面来总结一下vue组件间的各种使用方法以及一些技巧 ------ ...

  8. Spring Cloud番外篇-001

    熔断监控:Hystrix Dashboard Hystrix Dashboard是一款针对Hystrix进行实时监控的工具,通过Hystrix Dashboard可以直观地看到个Hystrix Com ...

  9. Asp.Net Core 轻松学-实现跨平台的自定义Json数据包

    前言     在前后端分离的业务开发中,我们总是需要返回各种各样的数据包格式,一个良好的 json 格式数据包是我们一贯奉行的原则,下面就利用 Json.Net 来做一个简单具有跨平台的序列化数据包实 ...

  10. (转)使用JMeter进行Web压力测试

    使用JMeter进行压力测试 说到压力测试,一般第一反应都是LoadRunner.这个软件也确实是自动化测试的一个事实标准.无奈这个软件太过庞大,以及不能在MacOS上使用.我由于项目的需要,需要对一 ...