css实现简单几何图形

时间 2019-12-14

标签 css 实现简单几何图形栏目 CSS 繁體版

原文原文链接

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

页面上一些简单的图形，如三角形、圆形等等，除了用图片来实现，咱们还能够用css的border属性来实现，不只减小了内存占用，对图形的操做也更灵活。spa

接下来咱们就一步一步的来讲一下怎么实现这些几何图形。3d

话很少说，这就开始吧。code

目录：blog

　　1、梯形图片

　　2、三角形内存

　　3、圆形class

　　4、椭圆原理

　　5、圆柱形im

　　6、扇形

　　7、半圆

　　8、彩带

1、梯形

咱们都知道，用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，是为了减小没必要要的占位。

咱们还能够经过修改边框的宽度来获得不一样大小的梯形，这里就不一一写了。

2、三角形

梯形和三角形的原理是同样的，只不过是把盒子的宽高都设置为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;}

三个边框设置的粗细都是同样的，这样咱们获得的是一个直角三角形，若是要获得不一样形状的三角形，只须要改变边框的粗细就能够了。

3、圆形

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

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

4、椭圆

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

5、圆柱形

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

6、扇形

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

7、半圆

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

8、彩带

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

除了以上这些，还有不少图形能够实现，有兴趣的朋友能够多多尝试。

欢迎留言~