css实现简单几何图形

星雨森曼      2022-02-10     663

关键词:

css实现简单几何图形

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

 

页面上一些简单的图形,如三角形、圆形等等,除了用图片来实现,我们还可以用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- 查看详情