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; ...
随机推荐
- github上老外做的jQuery虚拟键盘
jQuery官方比较迟滞的更新版本: http://plugins.jquery.com/keyboard/ 最新版本更新官方地址: https://github.com/Mottie/Keyboar ...
- 在SQLSERVER中如何检测一个字符串中是否包含另一个字符串
--当charindex返回值大于0时则包含 为0不包含 select CHARINDEX('456','123456') SQL语句使用CHARINDEX函数,来测试一个字符串中是否包含另一个字 ...
- Jquery实现form表单提交后局部刷新页面的多种方法
最近做一个小项目,刚好需要用到搜索功能,实现搜索框内输入数据然后按回车或者点击“提交”,然后给后台数据库处理并返回数据给前端,在前端局部更新数据. 但是遇到了一个小问题,就是form表单下任意输入框输 ...
- WCF使用net.tcp寄宿到IIS中
一.IIS部分 1. 安装WAS,如下图所示: 2. 网站net.tcp协议绑定,如下图所示: 3. 网站启用net.tcp,如下图所示: 二.WCF代码部分 1. DesignCaseService ...
- Java提供了哪些IO方式?IO, BIO, NIO, AIO是什么?
IO一直是软件开发中的核心部分之一,而随着互联网技术的提高,IO的重要性也越来越重.纵观开发界,能够巧妙运用IO,不但对于公司,而且对于开发人员都非常的重要.Java的IO机制也是一直在不断的完善,以 ...
- Multipath多路径冗余
一.什么是multipath 多路径冗余I/O(Multipath I/O)是指服务器通过多条物理路径连接到块存储设备. 为了避免存储链路单点故障,保证在磁盘阵列控制器切换时数据访问的不间断,多链路负 ...
- Nginx的文件夹的别名设计&drupal简洁url
参考:nginx 官方drupal 配置 - Drupal | NGINX 环境:ubuntu14,Nginx1.12, MariaDB5.5.56,PHP7.1.7 需求:1.不同的网站,不要用文件 ...
- JavaScript--浅谈DOM操作
JavaScript之浅谈DOM操作 1.理解DOM: DOM(Document Object Model ,文档对象模型)一种独立于语言,用于操作xml,html文档的应用编程接口. 怎么说,我从两 ...
- jQuery.when(deferreds)
有一天当我的上司问到我一个问题,两个或者多个ajax 同时运行,怎么去处理当它成功或者失败以后执行我想要的结果.我的第一反应就是if或者switch判断.其实不然jQuery已经有好的方案帮我们解决了 ...
- Keras vs. PyTorch in Transfer Learning
We perform image classification, one of the computer vision tasks deep learning shines at. As traini ...