css3画图那些事（三角形、圆形、梯形等）

yuxue 发布于2019-04-23 13:31 / 3582人阅读

摘要：闲来无事，写写图形。当时巩固一下吧。前端小白，写的不好还请前辈多指教。正方形，椭圆，和梯形。然后在设置一个倾斜就好了

闲来无事，写写图形。当时巩固一下css3吧.。前端小白，写的不好还请前辈多指教。

三角形

</>复制代码 
{  
    width: 0;
    height: 0;
    border-bottom: 140px solid red ;
    border-right: 70px solid transparent;
    border-left: 70px solid transparent;
}

圆形

</>复制代码 
{
        width: 0px;
        height: 0px;
        border:50px solid red;
        border-radius: 50%;
}

梯形

</>复制代码 
{
    width: 120px;
    height: 0px;
    border-bottom:120px solid red ;
    border-right: 60px solid transparent;
    border-left: 60px solid transparent;
}

平行四边形

</>复制代码 
{
        width: 0px;
        height: 0px;
        border:100px solid red ;
        transform: skew(30deg);
}

菱形（实现方法有很多，这里只是两个三角形合并，也就是正三角和倒三角）

</>复制代码 
.a{
    width: 0;
    height: 0;
    border-bottom: 140px solid red ;
    border-right: 70px solid transparent;
    border-left: 70px solid transparent;                            
}
.b{
    width: 0;
    height: 0;
    border-top : 140px solid red;
    border-left : 70px solid transparent; 
    border-right : 70px solid transparent; 
    }

椭圆形

</>复制代码 
{

</>复制代码 
    width: 200px;
    height: 50px;
    border:1px solid red;
    border-radius:100px;

</>复制代码 
}

五边形（这里使用一个三角形加一个正方形实现）

</>复制代码 
    .a{
        width: 0;
        height: 0;
        border-bottom  : 140px solid red;
        border-left : 70px solid transparent; 
        border-right : 70px solid transparent;                 
    }
    .b{
        width: 140px;
        height: 140px;
        display: inline-block;
        border:1px solid red;
        background-color: red ;
    }

贪吃蛇蛇头你敢信？哈哈

</>复制代码 
{
        width: 0px;
        height: 0px;
        border-radius: 50%;
        border:140px solid red;
        border-right :140px solid transparent; 
}

扇形

</>复制代码 
{
        width: 0px;
        height: 0px;
        border-radius: 50%;
        border :140px solid transparent; 
        border-bottom:140px solid red;
}

登录icon（两个div，其中一个div设置一个margin-top的负值，移上来就好了）

</>复制代码 
    .a{
        width: 0px;
        height: 0px;
        border-radius: 50%;
        border: 30px solid #000;
    }
    .b{
        width: 0px;
        border: 50px solid #000;
        border-top-right-radius: 50px;
        border-top-left-radius: 50px;
        border-top-width: 25px;
        border-bottom-width: 25px;
    }

再来一个小视频 （用4个div拼接起来，两个圆圈，一个长方形，一个梯形就好了）

</>复制代码 
    .a{    
        display: inline-block;
        width: 20px;
        height: 20px;
        border-radius: 50%;
        border: 1px solid #000;
    }
    .b{    
        display: inline-block;
        width: 30px;
        height: 30px;
        border-radius: 50%;
        border: 1px solid #000;
    }
    .c{
        width: 80px;
        height: 50px;
        border: 1px solid #000;
        border-radius: 10px;
        }
    .d{
        height: 40px;
        border-right: 30px solid #000;
        border-top: 16px solid transparent;
        border-bottom: 16px solid transparent;
        border-radius: 10px;
        }

再来一个垃圾桶三个图形叠加。正方形，椭圆，和梯形。然后在设置一个倾斜就好了

</>复制代码 
.a{    
        width: 0px;
        height: 0px;
        border-radius: 4px;
        border: 8px solid #000;
        border-top-width: 0;
        margin-left:164px ;
        margin-top: 100px;
    }
    .b{    
        width: 0px;
        height: 0px;
        border-radius:8px ;
        border-top: 15px solid #000;
        border-left: 132px solid #000;
        margin-left: 108px;
    }
    .c{
        width: 78px;
        border-bottom-width: 100px;
        border-top: 100px solid #000;
        border-left: 18px solid transparent;
        border-right: 18px solid transparent;
    }

GPU云服务器云服务器云服务器那些事梯形 css梯形梯形乘法表

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/1987.html

css3之图形绘制

摘要：由于近期的项目中出现了不规则的边框和图形，所以重新温习一下的图形绘制。。。样式绘制的图形比图片的性能要好，体验更佳，关键一点是更加有趣以下几个例子主要是运用了中伪元素等属性来完成的，我们先了解下它们的基本原理。由于近期的项目中出现了不规则的边框和图形，所以重新温习一下CSS3的图形绘制。。。样式绘制的图形比图片的性能要好，体验更佳，关键一点是更加有趣！以下几个例子主要是运用了css3中b...

Null 2019-04-23 13:28 评论0 收藏0
css3图形绘制

摘要：以下几个例子主要是运用了中伪元素等属性来完成的，我们先了解下它们的基本原理。简单的来说语法主要包含三个属性。你可能会惊讶地发现原来是一个简写属性。以下几个例子主要是运用了css3中border、bordr-radius、transform、伪元素等属性来完成的，我们先了解下它们的基本原理。 border：简单的来说border语法主要包含（border-width、border-...

niceforbear 2019-04-23 13:09 评论0 收藏0
CSS 绘制各种形状

摘要：说明使用可以绘制出许多形状，比如三角形梯形圆形椭圆，等并不只是可以绘制矩形。前面后面左面右面下面查看示例总结文中实现的各种形状，也许你觉得实现的很复杂，其实你也可以使用这一个属性，绘制各种形状。说明使用 CSS 可以绘制出许多形状，比如三角形、梯形、圆形、椭圆，等并不只是可以绘制矩形。下面来看看怎么实现这些形状的吧。为了容易理解，文章分为基本形状和组合形状来说，基本形状是比较...

3fuyu 2019-08-02 16:09 评论0 收藏0
CSS 绘制各种形状

摘要：说明使用可以绘制出许多形状，比如三角形梯形圆形椭圆，等并不只是可以绘制矩形。前面后面左面右面下面查看示例总结文中实现的各种形状，也许你觉得实现的很复杂，其实你也可以使用这一个属性，绘制各种形状。说明使用 CSS 可以绘制出许多形状，比如三角形、梯形、圆形、椭圆，等并不只是可以绘制矩形。下面来看看怎么实现这些形状的吧。为了容易理解，文章分为基本形状和组合形状来说，基本形状是比较...

geekzhou 2019-08-30 15:43 评论0 收藏0
css 实现各种基本图形

摘要：三角形三个角分别是，此时画五角星等价于画三个三角形。所以理论上，通过控制一个三条的长度，进而实现不同大小的三角形是可行。实践了一番，由于很难得到一个整数值，所以通过这种方法画正五角形几乎是无法实现的。三角形写 css 的时候，用惯了背景图，忽略了 css 本身其实可以实现很多简单的基本图形，比如三角形： .triangle { border-style: solid; ...

Elle 2019-08-30 13:21 评论0 收藏0