关键词:
前言:你知道吗?用代码就可以做出三角形、圆形、扇形等等这些几何图形呦。快过来一探究竟吧!
页面上一些简单的图形,如三角形、圆形等等,除了用图片来实现,我们还可以用css的border属性来实现,不仅减少了内存占用,对图形的操作也更灵活。
接下来我们就一步一步的来说一下怎么实现这些几何图形。
本文列举了一些常见的几何图形,更多几何图形请到github下载。
项目github地址:https://github.com/ichengll/C-heart
话不多说,这就开始吧。
目录:
一、梯形
二、三角形
三、圆形
四、椭圆
五、圆柱形
六、扇形
七、半圆
八、彩带
一、梯形
我们都知道,用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:0;border-right:60px solid transparent;
border-bottom:60px solid green;border-left:60px solid transparent;}
效果如下:
想得到左边的梯形,就把盒子的宽度设置为0,去掉右边的线条,其余线条的颜色设置为透明色:
.box {width:0; 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:0; height:0;border-top:60px solid blue;border-right:60px solid yellow;
border-bottom:60px solid green;border-left:60px solid red;}
看一下效果:
要得到底部的三角形,要这么写:
.box {width:0; height:0;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:0;height:100px;border-right:50px solid green;
border-bottom:30px solid transparent;border-left:50px solid green;}
css3linear-gradient线性渐变实现虚线等简单实用图形
...好CSS3的gradient渐变性质是background-image,于是,我们可以实现任意数量渐变背景图的叠加效果。甚至,理论上,任意彩色jpg图片都是可以使用CSS3渐变背景实现的。这种特性和box-shadow类似,参见“CSS3box-sh 查看详情
用css绘制简单图形
...了如何用只用1个元素和CSS规则绘制各种常见的图形:从简单的矩形、三角形到复杂的月亮、放大镜甚至是太极图。 这种绘图方式主要用到了两类技巧:一是使用伪元素,二是设置图形的边框。特别是边框的使用,非常巧妙... 查看详情
css实现一些图形
css做的一些图形。要先理解一个基础:css边框相接触的地方是45度平分空间的。#k{width:20px;height:30px;border:40pxsolid;border-color:redgreenyellowblue;} 图形一:1#talkbubble{2width:120px;3height:80px;4background:red;5position:relative; 查看详情
用css来写一些简单的图形
在写网页的过程中,有时我们需要用到一些简单的图片但是手头又没有合适的,我们其实可以自己来写,下面我就简单的介绍几个例子:1.上三角TriangleUp#triangle-up{width:0;height:0;border-left:50pxsolidtransparent;border-right:50pxsolidtransparent;bo... 查看详情
css3实现基本图形
http://blog.csdn.net/laokdidiao/article/details/51189476代码:<!DOCTYPEhtml><html><head><metacharset="UTF-8"><title>CSS3实现基本图形</title><style>#Circle{width:100px; 查看详情
利用噪声构建美妙的css图形
...的图形。我们首先来看一个简单的例子。首先,假设我们实现一个10x10的格子:此时,我们可以利用一些随机效果,优化这个图案。譬如,我们给它随机添加不同的颜色:虽然利用了随机,随机填充了每一个格子的颜色,看着有... 查看详情
计算机图形学实验五——简单动画的实现(代码片段)
【实验名称】简单动画的实现【实验目的】(1)指定图形运动轨迹,实现物体的移动过程和移动速度控制;【实验原理】1)简单动画的原理:显示一个对象,然后把它抹去,把这个图形进行变换后,再在新位... 查看详情
css3实现32种基本图形(代码片段)
CSS3实现32种基本图形 CSS3可以实现很多漂亮的图形,我收集了32种图形,在下面列出。直接用CSS3画出这些图形,要比贴图性能更好,体验更加,是一种非常好... 查看详情
css实现各种形状
CSS实现各种形状CSS3的一个非常酷的特性是允许我们创建各种规则和不规则形状的图形,从而可以减少图片的使用。以前只能在Photoshop等图像编辑软件中制作的复杂图形现在使用CSS3就可以完成了。通过使用新的CSS属性,像transform... 查看详情
利用css制作图形效果
...教程还是挺多的,今天我主要想解释一下里面一些demo的实现原理,话不多说,开始吧 以下所有内容只使用一个HTML元素。任何类型的CSS,只要它至少在一个浏览器中支持。一. 实现一个心形#heart{position:relative;width:100px;heigh... 查看详情
自己主动图片生成在前端开发中的一些尝试
...那用用多边形、圆形和线条组成的图形。这个图形用css3实现不了,或者能实现。但为了兼容某些浏览器不能用css3来实现,仅仅能切图。好的。你非常快切完了并在样式中引用了。但没过 查看详情
奇妙的css几何图形
三角形:通常会使用透明的border模拟出一个三角形:▲.traingle{width:0;height:0;border-left:50pxsolidtransparent;border-right:50pxsolidtransparent;border-bottom:100pxsolidyellowgreen;} 切角:采用多重线性渐变实现切角 .notching{widt 查看详情
c的图形界面开发库,可借助xml和css构建简单的跨平台桌面应用
...imgui,LCUI中大部分缺少的特性都能在这些项目中找到相关实现,新功能的开发成本和复杂度也因此而降低了很多。开源此项目的原因之一是进行技术交流,如果你有同类项目的研究和使用经验,可以考虑向此项目提供改进方案。... 查看详情
canvas入门(代码片段)
...的角度,就得到了图中的效果。使用CSS中的clip-path也可以实现多边形的展示(通过设定显示的部分和隐藏的部分),但是想要再对图形进行变换,还需要引入JavaScript来实现动态效果,这无疑增加了工作量。而上面这些内容就是... 查看详情
springsecurity-6-基于filter实现图形验证码
SpringSecurity-6-基于Filter实现图形验证码SpringSecurity中有多种方式实现图像验证码,使用自定义过滤器去处理验证码逻辑是最简单的方式,只要将过滤器添加到合适的位置,当登录的时候,对验证码进行校验,成功就放行,失败则... 查看详情
用css绘制最常见的40种形状和图形
...com/post/40-css-shapes.html今天在国外的网站上看到了很多看似简单却又非常强大的纯CSS绘制的图形,里面有最简单的矩形、圆形和三角形,也有各种常见的多边形,甚至是阴阳太极和网站小图标,真的非常强大,分享给大家。Square(... 查看详情
2.绘制简单的几何图形
一、点、直线和多边形 数学上的点,只有位置,没有大小。但在计算机中,无论计算精度如何提高,始终不能表示一个无穷小的点。另一方面,无论图形输出设备如何精确, 始终不能输出一个无穷小的点。一般情况下,... 查看详情
css3之图形绘制
...我们先了解下它们的基本原理。 border:简单的来说border语法主要包含(border- 查看详情