css3画图那些事(三角形、圆形、梯形等)
闲来无事,写写图形。当时巩固一下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画图那些事(三角形、圆形、梯形等)的更多相关文章
- CSS实现三角形、梯形、平行四边形、圆形、椭圆形、对话框、自适应正方形
本文篇幅较长,希望能坚持看完,转载请注明出处,如果觉得好文请给个赞吧 CSS实现梯形 CSS实现三角形和梯形主要是依靠border是梯形的特性来做的,有点像相框的那种感觉. 首先我们先给一个正方形设置 ...
- 纯css 实现 三角形、梯形等 效果
今天一个刚开始学习html 的小白问我一个问题,css 可以实现正方形,长方形,和圆型(border-radius),怎么能做出个三角形.梯形等等形状呢?于是我便开启了装逼模式, 给他讲解了一下我的思 ...
- 用CSS3实现带小三角形的div框(不用图片)
现在看到了很多带小三角形的方框,如微信.Mac版的QQ.QQ空间的时间轴等等,在聊天或者是发表的状态的内容外面都有一个带小三角形的矩形框包围着,感觉看着很不错,于是决定亲自动手写一个,我上次用的是偏移 ...
- CSS3 画基本图形,圆形、椭圆形、三角形等
CSS3圆角#css3-circle{ width: 150px; height: 150px; border-radius: 50%; }CSS3 椭圆形css3 radius#css3-elips ...
- CSS3画图
众所周知,用CSS3的圆角.转换可以画出各种不同的形状,制作不同的图案,早些前先驱者已画出经典的叮当猫,iphone手机等展示CSS3的强大实力,趁最近有空我也对CSS3进行了一些实践,颇有收获. 用 ...
- CSS 实现三角形、梯形、等腰梯形
三角形 ; width: 0px; border-width: 0px 30px 45px 145px; border-style: none solid solid; border-color: t ...
- css3动画,点击圆形背景扩展整个页面效果
上次做项目的时候,要求点击链接,这个链接的圆形背景扩散充满整个页面,今天把这个效果整理一下,是简单的css3的动画特效,粘贴下面的代码看效果 <!DOCTYPE html> <htm ...
- 利用CSS3中transparent实现三角形及三角形组合图
??如何绘制三角形及三角形的组合图案,以下是自己画的草图 源码如下 <!DOCTYPE html> <html lang="en"> <head> ...
- 利用css3特性写出三角形(兼容IE浏览器)
利用CSS写出三角形的效果 效果如图: 代码如下: .triangle-up { width:0px; height:0px; border-left:10px solid transparent; ...
随机推荐
- Angular2入门教程-2 实现TodoList App
最近在学习<Angular从零到一>(机械工业出版社) 遇到一些问题,书中讲的不明白,在网上找了一些,资源很多,也有很多前人的经验 https://blog.csdn.net/ztguan ...
- Angular建立待办事项应用
建立路由 接前一小节,在src/app/app.component.html把login组件去掉 第一步: 在src/index.html指定基准路径 浏览器会根据这个路径下载css,图像,js文件, ...
- Spark你需要知道这些
谈到 Spark,我们总是强调它比 Hadoop 更高效.为什么它可以更高效呢?是因为它优先使用内存存储?还是因为它拥有比 MapReduce 更简单高效的计算模型? 与 Hadoop 作业的区别 我 ...
- Java对象的内存(一)
前言 新人一枚,刚刚入门编程不久,各方面都在学习当中,博文有什么错误的地方,希望我们可以多多交流! 最近,在开发App后台过程中,需要将项目部署到云服务器上.而云服务器的内存大小却只有1G.要如何做到 ...
- MVC 导出Execl 的总结几种方式 (三)
第三种方式呢,就是借用第三方插件 NPOI 来实现Execl 导出 第一步:在NuGut包中下载NPOI 组件 第二步:编辑控制器代码 public FileResult ExcelNewKeyPro ...
- Centos7 安装 ActiveMq
1.安装 # cd /usr/local/src/# wget http://mirrors.shu.edu.cn/apache//activemq/5.15.3/apache-activemq-5. ...
- js 中的console.log有什么作用
主要是方便你调式javascript用的.你可以看到你在页面中输出的内容. 相比alert他的优点是: 他能看到结构话的东西,如果是alert,淡出一个对象就是[object object],但是co ...
- js判断移动端页面按home键切换到桌面事件
---恢复内容开始--- 原理就是通过页面标签切换事件(visibilitychange)来判断,亦可用户移动端桌面和app切换. 先看代码: var hiddenProperty = 'hidden ...
- 使用iview-admin2构建的项目,热更新无法启动
原因:@vue/cli-service版本是3.0.1解决:升级@vue/cli-service到最新版本
- .NET Core 微服务架构-Docker部署
本文主要介绍通过Docker来部署通过.NET Core开发的微服务架构,部署的微服务主要包括统一网关(使用Ocelot开发).统一认证(IdentityServer4).应用服务(ASP.NET C ...