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

三角形

{
width:;
height:;
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:;
height:;
border-bottom: 140px solid red ;
border-right: 70px solid transparent;
border-left: 70px solid transparent;
}
.b{
width:;
height:;
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:;
height:;
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;
} <div>
<div class="a" style="margin-left:160px ;margin-top: 100px;"></div>
<div class="b" ></div>
</div>
<div>
<div class="c" style="margin-left:150px ; display: inline-block;vertical-align: top;"></div>
<div class="d" style="margin-left:0px ; display: inline-block;margin-top: -10px;"></div>
</div>

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

.a{
width: 0px;
height: 0px;
border-radius: 4px;
border: 8px solid #000;
border-top-width:;
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;
} <div style="display: inline-block;transform: rotate(9deg);">
<div class="a"></div>
<div class="b"></div>
</div>
<div style="margin-left: 110px; margin-top: 18px;">
<div class="c"></div>
</div>

css3画图那些事(三角形、圆形、梯形等)的更多相关文章

  1. CSS实现三角形、梯形、平行四边形、圆形、椭圆形、对话框、自适应正方形

    本文篇幅较长,希望能坚持看完,转载请注明出处,如果觉得好文请给个赞吧 CSS实现梯形 CSS实现三角形和梯形主要是依靠border是梯形的特性来做的,有点像相框的那种感觉. 首先我们先给一个正方形设置 ...

  2. 纯css 实现 三角形、梯形等 效果

    今天一个刚开始学习html 的小白问我一个问题,css 可以实现正方形,长方形,和圆型(border-radius),怎么能做出个三角形.梯形等等形状呢?于是我便开启了装逼模式, 给他讲解了一下我的思 ...

  3. 用CSS3实现带小三角形的div框(不用图片)

    现在看到了很多带小三角形的方框,如微信.Mac版的QQ.QQ空间的时间轴等等,在聊天或者是发表的状态的内容外面都有一个带小三角形的矩形框包围着,感觉看着很不错,于是决定亲自动手写一个,我上次用的是偏移 ...

  4. CSS3 画基本图形,圆形、椭圆形、三角形等

    CSS3圆角#css3-circle{ width: 150px; height: 150px; border-radius: 50%; }CSS3 椭圆形css3 radius#css3-elips ...

  5. CSS3画图

    众所周知,用CSS3的圆角.转换可以画出各种不同的形状,制作不同的图案,早些前先驱者已画出经典的叮当猫,iphone手机等展示CSS3的强大实力,趁最近有空我也对CSS3进行了一些实践,颇有收获. 用 ...

  6. CSS 实现三角形、梯形、等腰梯形

    三角形 ; width: 0px; border-width: 0px 30px 45px 145px; border-style: none solid solid; border-color: t ...

  7. css3动画,点击圆形背景扩展整个页面效果

    上次做项目的时候,要求点击链接,这个链接的圆形背景扩散充满整个页面,今天把这个效果整理一下,是简单的css3的动画特效,粘贴下面的代码看效果 <!DOCTYPE html> <htm ...

  8. 利用CSS3中transparent实现三角形及三角形组合图

    ??如何绘制三角形及三角形的组合图案,以下是自己画的草图 源码如下 <!DOCTYPE html> <html lang="en"> <head> ...

  9. 利用css3特性写出三角形(兼容IE浏览器)

    利用CSS写出三角形的效果 效果如图: 代码如下: .triangle-up { width:0px; height:0px; border-left:10px solid transparent; ...

随机推荐

  1. win7怎么去除快捷方式的小箭头

    方式一. 新建一个txt文档把以下内容复制进去 在重命名001.bat 打开就行了 但要重启之后才有效 @ECHO OFF :MENU ECHO. ECHO. =-=-=-=-=请选择您要运行的项目= ...

  2. 有序列表ol和定义列表dl,dt,dd

    有序列表是一种讲究排序列表结构,使用<ol>标签定义,其中包含多个<li>列表项目.一般网页设计中,列表结构可以互用有序或者无序类表标签.但是,在强调项目排序栏目中,选用有序列 ...

  3. 用于深拷贝的扩展方法 C#

    using System.Runtime.Serialization.Formatters.Binary; using System.IO; public static class Tool { pu ...

  4. 由表生成代码:mybatis-generator入门

    application.properties ## mapper xml 文件地址 mybatis.mapper-locations=classpath*:mapper/*Mapper.xml ##数 ...

  5. java8 lambda 表达式

    lambada 表达式实质上是一个匿名方法,但该方法并非独立执行,而是用于实现由函数式接口定义的唯一抽象方法 使用 lambda 表达式时,会创建实现了函数式接口的一个匿名类实例 可以将 lambda ...

  6. 在pom.xml中添加Spring依赖

    <?xml version="1.0" encoding="UTF-8"?> <project xmlns="http://mave ...

  7. :after伪类+content内容生成经典应用举例——张鑫旭

    一.简单说说content内容生成 content内容生成就是通过content属性生成内容,content属性早在CSS2.1的时候就被引入了,可以使用:before以及:after伪元素生成内容. ...

  8. JSONP 教程

    JSONP 教程 本章节我们将向大家介绍 JSONP 的知识. Jsonp(JSON with Padding) 是 json 的一种"使用模式",可以让网页从别的域名(网站)那获 ...

  9. js-权威指南学习笔记5

    第六章 对象 1.对象的方法通常是继承的属性.这种原型式继承是JS的核心特征. 2.除了名字和值之外,每个属性还有一些与之相关的值,称为属性特性——可写/可枚举/可配置.数据属性的四个特性——值.可写 ...

  10. 【代码笔记】iOS-JASidePanelsDemo(侧滑)

    一,效果图. 二,工程图. 三,代码. AppDelegate.h #import <UIKit/UIKit.h> @class JASidePanelController; @inter ...