CSS3 实现圆形、椭圆形、三角形等各种形状样式
CSS3 圆形
#css3-circle{
width: 150px;
height: 150px;
border-radius: 50%;
background-color: #232323;}
CSS3 椭圆形
#css3-elipse{
width: 200px;
height: 100px;
border-radius: 50%;
background-color: #232323;}
CSS3 三角形
#css3-triangle{
width:;
height:;
border-left: 100px solid transparent;
border-right: 100px solid transparent;
border-bottom: 150px solid #232323;}
CSS3 平行四边形
#css3-parallelogram{
width: 200px;
height: 100px;
background: #232323;
-webkit-transform: skew(-45deg); -moz-transform: skew(-45deg); -o-transform: skew(-45deg);
transform: skew(-45deg);
}
CSS3 梯形
#css3-trapezoid{
width: 100px;
height:;
border-bottom: 100px solid #232323;
border-left: 50px solid transparent;
border-right: 50px solid transparent;
}
CSS3 六角星
#css3-six-star{
width:;
height:;
position: relative;
border-bottom: 100px solid #232323;
border-left: 50px solid transparent;
border-right: 50px solid transparent;
}#css3-six-star:after{
content: "";
width:;
height:;
position: absolute;
left: -50px;
top: 35px;
border-top: 100px solid #232323;
border-left: 50px solid transparent;
border-right: 50px solid transparent;
}
CSS3 五角星
#css3-five-star{
width: 0px;
height: 0px;
margin: 50px 0;
position: relative;
display: block;
color: #232323;
border-right: 100px solid transparent;
border-bottom: 70px solid #232323;
border-left:100px solid transparent; -moz-transform:rotate(35deg); -webkit-transform: rotate(35deg); -ms-transform:rotate(35deg); -o-transform:rotate(35deg);
}
#css3-five-star:before{
border-bottom: 80px solid #232323;;
border-left: 30px solid transparent;
border-right: 30px solid transparent;
position: absolute;
height:;
width:;
top: -45px;
left: -63px;
display: block;
content: ''; -webkit-transform: rotate(-35deg); -moz-transform:rotate(-35deg); -ms-transform:rotate(-35deg); -o-transform:rotate(-35deg);
}
#css3-five-star:after{
position: absolute;
display: block;
color: #232323;
top: 3px;
left: -105px;
width: 0px;
height: 0px;
border-right: 100px solid transparent;
border-bottom: 70px solid #232323;
border-left: 100px solid transparent; -webkit-transform: rotate(-70deg); -moz-transform:rotate(-70deg); -ms-transform:rotate(-70deg); -o-transform:rotate(-70deg);
content: '';
}
CSS3 五边形
#css3-pentagon {
position: relative;
width: 54px;
border-width: 50px 18px 0;
border-style: solid;
border-color: #232323 transparent;}#css3-pentagon:before {
content: "";
position: absolute;
height:;
width:;
top: -85px;
left: -18px;
border-width: 0 45px 35px;
border-style: solid;
border-color: transparent transparent #232323;}
CSS3 六边形
#css3-hexagon {
width: 100px;
height: 55px;
background: #232323;
position: relative;
}
#css3-hexagon:before {
content: "";
position: absolute;
top: -25px;
left:;
width:;
height:;
border-left: 50px solid transparent;
border-right: 50px solid transparent;
border-bottom: 25px solid #232323; }#css3-hexagon:after {
content: "";
position: absolute;
bottom: -25px;
left:;
width:;
height:;
border-left: 50px solid transparent;
border-right: 50px solid transparent;
border-top: 25px solid #232323; }
CSS3 心形
#css3-heart {
position: relative;
width: 100px;
height: 90px;
}
#css3-heart:before, #css3-heart:after{
position: absolute;
content: "";
left: 50px;
top:;
width: 50px;
height: 80px;
background: #232323;
-moz-border-radius: 50px 50px 0 0;
border-radius: 50px 50px 0 0; -webkit-transform: rotate(-45deg); -moz-transform: rotate(-45deg); -ms-transform: rotate(-45deg); -o-transform: rotate(-45deg);
transform: rotate(-45deg); -webkit-transform-origin: 0 100%; -moz-transform-origin: 0 100%; -ms-transform-origin: 0 100%; -o-transform-origin: 0 100%;
transform-origin: 0 100%;
}
#css3-heart:after {
left:; -webkit-transform: rotate(45deg); -moz-transform: rotate(45deg); -ms-transform: rotate(45deg); -o-transform: rotate(45deg);
transform: rotate(45deg); -webkit-transform-origin: 100% 100%; -moz-transform-origin: 100% 100%; -ms-transform-origin: 100% 100%; -o-transform-origin: 100% 100%;
transform-origin :100% 100%;
}
CSS3 八卦
#css3-gossip {
width: 96px;
height: 48px;
background: #f1f1f1;
border-color: #232323;
border-style: solid;
border-width: 2px 2px 50px 2px;
border-radius: 100%;
position: relative;
}
#css3-gossip:before{
content: "";
position: absolute;
top: 50%;
left:;
background: #f1f1f1;
border: 18px solid #232323;
border-radius: 100%;
width: 12px;
height: 12px;
}
#css3-gossip:after {
content: "";
position: absolute;
top: 50%;
left: 50%;
background: #232323;
border: 18px solid #f1f1f1;
border-radius:100%;
width: 12px;
height: 12px;
}
CSS3 实现圆形、椭圆形、三角形等各种形状样式的更多相关文章
- 详解用CSS3制作圆形滚动进度条动画效果
主 题 今天手把手教大家用CSS3制作圆形滚动进度条动画,想不会都难!那么,到底是什么东东呢?先不急,之前我分享了一个css实现进度条效果的博客<CSS实现进度条和订单进度条>,但是呢, ...
- 用CSS3实现带小三角形的div框(不用图片)
现在看到了很多带小三角形的方框,如微信.Mac版的QQ.QQ空间的时间轴等等,在聊天或者是发表的状态的内容外面都有一个带小三角形的矩形框包围着,感觉看着很不错,于是决定亲自动手写一个,我上次用的是偏移 ...
- CSS之纯CSS画的基本图形(矩形、圆形、三角形、多边形、爱心、八卦等)
图形包括基本的矩形.圆形.椭圆.三角形.多边形,也包括稍微复杂一点的爱心.钻石.阴阳八卦等.当然有一些需要用到CSS3的属性,所以在你打开这篇文章的时候,我希望你用的是firefox或者chrome, ...
- canvas快速绘制圆形、三角形、矩形、多边形
想看前面整理的canvas常用API的同学可以点下面: canvas学习之API整理笔记(一) canvas学习之API整理笔记(二) 本系列文章涉及的所有代码都将上传至:项目代码github地址,喜 ...
- 移动端纯CSS3制作圆形进度条所遇到的问题
近日在开发的页面中,需要制作一个动态的圆形进度条,首先想到的是利用两个矩形,宽等于直径的一半,高等于直径,两个矩形利用浮动贴在一起,设置overflow:hidden属性,作为盒子,内部有一个与其宽高 ...
- 转载css3 图片圆形显示 如何CSS将正方形图片显示为圆形图片布局
转载 原文:http://www.divcss5.com/wenji/w732.shtml 原本不是圆形图片,通过CSS样式布局实现成圆形图片,首先图片必须为正方形. 二.使用布局技术 - ...
- 通过CSS3实现圆形头像显示
很久没更新博客了,因为比较菜,也没什么能在上面分享的.作为新手,马上要毕业找工作了,最近又在重新学习web的一些知识,刚刚学到CSS3,跟大家分享一些比较有趣的知识.今天分享的是利用CSS实现圆形头像 ...
- 纯CSS3打造圆形菜单
原理是使用相对定位和绝对定位确定圆形菜单位置. 使用伪类选择器E:hover确定悬浮时候的效果,动画效果用CSS3的transition属性. 大概代码如下. html: <div id=&qu ...
- css3实现圆形逐渐减少动画
写这个动画刚开始完全没有思路,后来参考网上的资料发现可以用半圆实现,具体原理如下: 1.,一个div作为背景,三个div做出三个半圆出来,一个用于旋转,一个靠左(用于与背景吻合),一个靠右(用于与背景 ...
随机推荐
- 在WPF中调用打开文件对话框
// Create OpenFileDialog Microsoft.Win32.OpenFileDialog dlg = new Microsoft.Win32.OpenFileDialog(); ...
- 1.6 安全认证与授权(springboot与安全)
引言:以下文档是学习尚硅谷关于springboot教学视频后整理而来! 一.安全 认证(Authentication):证明你是谁? 授权(Authorization):你能干什么? 参考资料: Sp ...
- vs2010下使用sqlite
1.SQLite安装SQlite官网:http://www.sqlite.org/download.html 找到以下截图中内容 第一个解压之后是sqlite3.exe,第二个解压之后是sqlite3 ...
- npm2 与 npm3的包版本管理
npm2采用严格的包依赖模式 npm install name@1.2.* ---- 1.2.0 <= version <= 1.2.9 npm install name@1.* ---- ...
- http与rfc
超文本传输协议(HTTP,HyperText Transfer Protocol)是互联网上应用最为广泛的一种网络协议.所有的WWW文件都必须遵守这个标准.设计HTTP最初的目的是为了提供一种发布和接 ...
- windows server2008 IIS搭建网站简易教程(阿里云)
最近搞了个阿里云服务器 想着需要用这个服务器学点东西,故而想着把自己之前写的网站能部署上去,虽然自己是做前端移动开发,但是对这个服务器的东西也很感兴趣 第一步 配置阿里云入口规则 如图开放81 80 ...
- 【XAF问题】不能将值NULL插入列"Oid"
一.问题 1. 不能将值NULL插入列"Oid" 二.解决方法 解决方法:删表,oid不能为空,继承的对象变了
- SAP WDA 自建Portal
1.新建Package:ZWDA. 2.新建Portal用户表:ZPORTAL_USER 上图中是基于CRM的BP来做的用户表,如果针对其他系统可以使用组织架构里的角色用户... 3.新建用户视图配置 ...
- Charles 抓包工具
参考博客: https://blog.csdn.net/mxw2552261/article/details/78645118 发包与改包: https://blog.csdn.net/b722305 ...
- LeetCode刷题 fIRST MISSING POSITIVE
Given an unsorted integer array,find missing postive integer. For example , Given [1,2,0]return 3, a ...