前言：你知道吗？用代码就可以做出三角形、圆形、扇形等等这些几何图形呦。快过来一探究竟吧！

页面上一些简单的图形，如三角形、圆形等等，除了用图片来实现，我们还可以用css的border属性来实现，不仅减少了内存占用，对图形的操作也更灵活。

接下来我们就一步一步的来说一下怎么实现这些几何图形。

话不多说，这就开始吧。

目录：

　　一、梯形

　　二、三角形

　　三、圆形

　　四、椭圆

　　五、圆柱形

　　六、扇形

　　七、半圆

　　八、彩带

一、梯形 

我们都知道，用border可以设置盒子的边框，包括上下左右边框，比如下面这个：

<style>

       .box {width:100px; height:100px;border:10px solid #a10;}

</style>

<body>

    <div class="box"></div>

</body>

这样实现的效果就不必多说了吧，就是下面这样：

　　接下来我们给每个边框都设置不同的颜色与：

.box {width:100px; height:100px;

border-top:60px solid blue;border-right:60px solid yellow;
border-bottom:60px solid green;border-left:60px solid pink;}

我给这个盒子的四个边框分别设置了不同的颜色，来看一下效果：

　　现在可以看出来，每个边框就是一个梯形的形状，那我们怎么只让他显示一个梯形呢？

我们设置边框的宽度是50px，盒子宽高都是100px，现在盒子的中心是有一个正方形的空白的，我们要得到梯形，首先要把这个空白去掉，怎么去呢，比如说我们要得到底部的梯形，那就要把盒子的高度设为0，这就把中间的空白去掉了，然后我们再去掉顶部的线条，把其余线条的颜色设置为透明色，这样就得到了一个梯形。具体代码如下：

.box {width:100px; height:;border-right:60px solid transparent;
border-bottom:60px solid green;border-left:60px solid transparent;}

效果如下：

想得到左边的梯形，就把盒子的宽度设置为0，去掉右边的线条，其余线条的颜色设置为透明色：

.box {width:; height:100px;border-top:60px solid transparent;
border-bottom:60px solid transparent;border-left:60px solid red;}

可能你们会问，为什么要把宽度或者高度设置为0，现在我们就拿红色这个梯形来举例子，我们用审查元素先来看一下这个梯形：

接下来我们把盒子的宽度设置为100px，再来看看审查元素：

看出差别了吗？宽度为0时，梯形所占的位置仅仅是梯形本身的宽度，而宽度设置为100px时，梯形的实际占位多了100像素值。我们将宽度设置为0，是为了减少不必要的占位。

我们还可以通过修改边框的宽度来得到不同大小的梯形，这里就不一一写了。

二、三角形

梯形和三角形的原理是一样的，只不过是把盒子的宽高都设置为0，代码如下：

.box {width:; height:;border-top:60px solid blue;border-right:60px solid yellow;
border-bottom:60px solid green;border-left:60px solid red;}

看一下效果：

要得到底部的三角形，要这么写：

.box {width:; height:;border-right:60px solid transparent;
border-bottom:60px solid green;border-left:60px solid transparent;}

三个边框设置的粗细都是一样的，这样我们得到的是一个直角三角形，如果要得到不同形状的三角形，只需要改变边框的粗细就可以了。

三、圆形

圆形我们就要用到 border-radius 圆角边框，下面是代码：

.box {width:100px; height:100px;background-color: green;border-radius:50px;}

四、椭圆

.box {width:100px; height:50px;background-color: green;border-radius:50px/25px;}

五、圆柱形

.box {width:100px; height:100px;background-color: green;border-radius:50px/25px;}

六、扇形

.box {width:100px;height:100px;background-color: green;border-top-left-radius: 100%;}

七、半圆

.box {width:100px;height:50px;background-color: green;border-radius:50px 50px 0 0;}

八、彩带

.box {width:;height:100px;border-right:50px solid green;
border-bottom:30px solid transparent;border-left:50px solid green;}

除了以上这些，还有很多图形可以实现，有兴趣的朋友可以多多尝试。

欢迎留言~

　

css实现简单几何图形的更多相关文章

  1. CSS绘制简单图形

    究竟该用字体图标.图片图标.还是CSS画一个图标?我也不知道.各有千秋吧.本文将介绍如何用css绘制简单的图形,所有测试在chrome58.0完成,如果你不能得到正确结果请到caniuse查一查看看是 ...

  2. Html5 和 CSS的简单应用

    本文是利用几个简单的小例子,来实现html+css的简单应用. 菱形链接菜单 本例是采用html5+css3.0设置的菜单链接.其中主要用到了以下几个方面: CSS3.0中的2D变换,如:旋转tran ...

  3. html css的简单学习（三）

    html css的简单学习(三) 前端开发工具:Dreamweaver.Hbuilder.WebStorm.Sublime.PhpStorm...=========================== ...

  4. html css的简单学习（二）

    html css的简单学习(二) <!Doctype html>告诉浏览器,这是一个html文档.lang="en" 默认是en,表示英语:zh-Hans 中文简体:z ...

  5. html css的简单学习

    html css的简单学习 css的内边距:padding (auto.length.%)(顺序:上.右.下.左)padding-toppadding-leftpadding-rightpadding ...

  6. Direct2D教程（三）简单几何图形

    从本章开始,我们介绍D2D几何图形. D2D图形分类 Direct2D支持多种类型的几何图形,包括Simple Geometry(简单几何图形) 矩形 圆角矩形 椭圆 Path Geometry(路径 ...

  7. css实现简单的告警提示动画效果

    需求:css实现简单的告警提示动画效果,当接收到实时信息的时候,页面弹出告警信息的动画效果 <!DOCTYPE html> <html lang="en"> ...

  8. css实现简单音乐符效果

    css实现简单音乐符效果 利用css3中的transform.animation.keyframes实现 <!DOCTYPE html> <html lang="en&qu ...

  9. jq+css+html简单实现导航下拉菜单

    相信导航栏下拉菜单是web开发最常见的一个item了.这里就不做介绍了,直接上code. Html部分 <div class="_nav"> <ul id=&qu ...

随机推荐

  1. 精神状态: Confused

    阿里和网易都已开放简历投递入口,本以为招聘季9月才开始的我,着实被震惊到了. 我还没准备好呢,远没有准备好. 这次日志,主要是想写三点.实习经历.接下来的计划.最后,自已在未来应该维持的心态. 关于实 ...

  2. backbone学习笔记：视图（View）

    Backbone 视图对象主要用来渲染数据,监听事件. Backbone的视图对象可以展示Model数据,也可以把用户编辑的Model数据传递到后台,可以通过监听事件操作视图里的DOM元素 举例: v ...

  3. Discuz!X 3.4 任意文件删除漏洞复现过程(附python脚本)

    今天看下群里在讨论Discuz!X 3.4 任意文件删除漏洞,自己做了一些测试,记录一下过程.结尾附上自己编写的python脚本,自动化实现任意文件删除. 具体漏洞,请查看 https://paper ...

  4. 【译】Kafka学习之路

    一直在思考写一些什么东西作为2017年开篇博客.突然看到一篇<Kafka学习之路>的博文,觉得十分应景,于是决定搬来这“他山之石”.虽然对于Kafka博客我一向坚持原创,不过这篇来自Con ...

  5. react设置多个className

    在一个元素上设置样式,有一个固定的样式,然后还有一个使用三元运算符根据条件添加的样式. 比如说有一个固定样式"title": <div className="tit ...

  6. codeforcess水题100道

    之所以在codeforces上找这100道水题的原因是为了巩固我对最近学的编程语言的掌握程度. 找的方式在codeforces上的PROBLEMSET中过的题最多的那些题里面出现的最前面的10个题型, ...

  7. Tomcat的目录结构和配置文件详解

    本文转载: https://www.zybuluo.com/1234567890/note/515235 参考帖子: Tomcat(一):基础配置详解 Tomcat服务器中配置多个域名,访问不同的we ...

  8. 【python3】 django2.0 在生成数据库表时报错： TypeError: __init__() missing 1 required positional argument: 'on_delete'

    python: 3.6.4 django: 2.0 models.py 代码如下 # coding: utf-8 from django.db import models from django.co ...

  9. 深入理解 Neutron -- OpenStack 网络实现（4）：网络名字空间

    问题导读1.如何查看网络名字空间?2.网络名字空间开头的名字有什么规律?3.dhcp服务是如何实现的?4.router的实现是通过iptables进行的是否正确?5.SNAT和DNAT规则有什么作用? ...

  10. Android自定义组件——四个方向滑动的菜单实现

    今天无意中实现了一个四个方向滑动的菜单,感觉挺好玩,滑动起来很顺手,既然已经做出来了就贴出来让大家也玩弄一下. 一.效果演示 (说明:目前没有安装Android模拟器,制作的动态图片太卡了,就贴一下静 ...