有趣的css3自定义图形
最近在做了一个项目,很漂亮的画面,里面的元素不泛有一些不规则的图形,为了不使用图片去做,我想到了强大的Css3,想看看是否有些属性可以帮助我来用代码去实现,于是,我在查找资料中找到了如下的一些非常棒的东东,我把它记录下来,如果有小伙伴和我一样需要用到此类,也可以不留痕迹的拿走去用~
1、制作圆形:
要使用CSS来制作一个圆形,我们需要一个div,被给它设置一个ID
圆形在设置CSS时要设置宽度和高度相等,然后设置border-radius属性为宽度或高度的一半即可:
#circle {
width: 120px;height: 120px;background: #7fee1d;-moz-border-radius: 60px;-webkit-border-radius: 60px;border-radius: 60px;
}
2、制作椭圆形:
椭圆形是正圆形的一个变体,同样使用一个带ID的div来制作
设置椭圆形的CSS时,高度要设置为宽度的一半,border-radius属性也要做相应的改变:
#oval {
width: 200px;height: 100px;background: #e9337c;-webkit-border-radius: 100px / 50px;-moz-border-radius: 100px / 50px;border-radius: 100px / 50px;
}
3、制作三角形:
要创建一个CSS三角形,需要使用border,通过设置不同边的透明效果,我们可以制作出三角形的现状。另外,在制作三角形时,宽度和高度要设置为0。
#triangle {
width: 0;height: 0;border-bottom: 140px solid #fcf921;border-left: 70px solid transparent;border-right: 70px solid transparent;
}
4、制作三角形:
要创建一个CSS三角形,需要使用border,通过设置不同边的透明效果,我们可以制作出三角形的现状。另外,在制作三角形时,宽度和高度要设置为0。
#triangle {
width: 0;height: 0;border-bottom: 140px solid #fcf921;border-left: 70px solid transparent;border-right: 70px solid transparent;
}
5、制作菱形
制作菱形的方法有很多种。这里使用的是transform属性和rotate相结合,使两个正反三角形上下显示。
#diamond {
width: 120px;height: 120px;background: #1eff00;
/* Rotate */
-webkit-transform: rotate(-45deg);-moz-transform: rotate(-45deg);-ms-transform: rotate(-45deg);-o-transform: rotate(-45deg);transform: rotate(-45deg);
/* Rotate Origin */
-webkit-transform-origin: 0 100%;-moz-transform-origin: 0 100%;-ms-transform-origin: 0 100%;-o-transform-origin: 0 100%;transform-origin: 0 100%;margin: 60px 0 10px 310px;
}
6、制作梯形:
梯形是三角形的一个变体,设置CSS梯形时,左右两条边设置为相等,并且给它设置一个宽度。
#trapezium {
height: 0;width: 120px;border-bottom: 120px solid #ec3504;border-left: 60px solid transparent;border-right: 60px solid transparent;
}
7、制作平行四边形:
平行四边形的制作方式是使用transform属性使长方形倾斜一个角度。
#parallelogram {
width: 160px;height: 100px;background: #8734f7;-webkit-transform: skew(30deg);-moz-transform: skew(30deg);-o-transform: skew(30deg);transform: skew(30deg);
}
8、星形:
星形的HTML结构同样使用一个带ID的空div。星形的实现方式比较复杂,主要是使用transform属性来旋转不同的边。仔细体会下面的代码。
#star {
width: 0;height: 0;margin: 50px 0;color: #fc2e5a;position: relative;display: block;border-right: 100px solid transparent;border-bottom: 70px solid #fc2e5a;border-left: 100px solid transparent;-moz-transform: rotate(35deg);-webkit-transform: rotate(35deg);-ms-transform: rotate(35deg);-o-transform: rotate(35deg);
}
#star:before {
height: 0;width: 0;position: absolute;display: block;top: -45px;left: -65px;border-bottom: 80px solid #fc2e5a;border-left: 30px solid transparent;border-right: 30px solid transparent;content: '';-webkit-transform: rotate(-35deg);-moz-transform: rotate(-35deg);-ms-transform: rotate(-35deg);-o-transform: rotate(-35deg);
}
#star:after {
content: '';width: 0;height: 0;position: absolute;display: block;top: 3px;left: -105px;color: #fc2e5a;border-right: 100px solid transparent;border-bottom: 70px solid #fc2e5a;border-left: 100px solid transparent;-webkit-transform: rotate(-70deg);-moz-transform: rotate(-70deg);-ms-transform: rotate(-70deg);-o-transform: rotate(-70deg);
}
9、六边形:
六边形的制作方法可以有很多种,可以像五边形一样,先制作一个长方形,然后在它的上面和下面各放置一个三角形。
#hexagon {
width: 100px;height: 55px;background: #fc5e5e;position: relative;margin: 10px auto;
}
#hexagon:before {
content: "";width: 0;height: 0;position: absolute;top: -25px;left: 0;border-left: 50px solid transparent;border-right: 50px solid transparent;border-bottom: 25px solid #fc5e5e;
}
#hexagon:after {
content: "";width: 0;height: 0;position: absolute;bottom: -25px;left: 0;border-left: 50px solid transparent;border-right: 50px solid transparent;border-top: 25px solid #fc5e5e;
}
10、心形:
心形的制作是非常复杂的,可以使用伪元素来制作,分别将伪元素旋转不同的角度,并修改transform-origin属性来元素的旋转中心点。
#heart {
position: relative;
}
#heart:before,#heart:after {
content: "";width: 70px;height: 115px;position: absolute;background: red;left: 70px;top: 0;-webkit-border-radius: 50px 50px 0 0;-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%;
}
#heart:after {
left: 0;-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%;
}
11、蛋形:
蛋形时椭圆形的一个变体,它的高度要比宽度稍大,并且设置正确的border-radius属性即可以制作出一个蛋形。
#egg {
width: 136px;height: 190px;background: #ffc000;display: block;-webkit-border-radius: 63px 63px 63px 63px / 108px 108px 72px 72px;border-radius: 50% 50% 50% 50% / 60% 60% 40% 40%;
}
12、消息提示框:
消息提示框可以先制作一个圆角矩形,然后在需要的地方放置一个三角形。
#comment_bubble {
width: 140px;height: 100px;background: #088cb7;position: relative;-moz-border-radius: 12px;-webkit-border-radius: 12px;border-radius: 12px;
}
#comment_bubble:before {
content: "";width: 0;height: 0;right: 100%;top: 38px;position: absolute;border-top: 13px solid transparent;border-right: 26px solid #088cb7;border-bottom: 13px solid transparent;
}
有趣的css3自定义图形相关推荐
- CSS3自定义滚动条
<!doctype html> <html lang="en"> <head><meta charset="UTF-8" ...
- 如何提取Tableau打包工作簿中的自定义图形和数据集
最近学习了一下Robert关于如何提取Tableau中自定义图形的文章,方法非常简单,只需使用大神提供的excel文件,就可以轻松完成. 文章地址:https://www.clearlyandsimp ...
- C# 绘制PDF图形——基本图形、自定义图形、色彩透明度
引言 在PDF中我们可以通过C#程序代码来添加非常丰富的元素来呈现我们想要表达的内容,如绘制表格.文字,添加图形.图像等等.在本篇文章中,我将介绍如何在PDF中绘制图形,并设置图形属性的操作. 文章中 ...
- css图形动画,CSS3 实现图形下落动画效果
先看效果 实现代码 * { margin: 0; padding: 0; box-sizing: border-box; } body { width: 100%; height: auto; bac ...
- OSG使用OpenGL(以及glad库)绘制自定义图形
简单记录一下在OSG中使用OpenGL函数(以及glad库)绘制自定义图形. 源码: #include <osgViewer/viewer> #include <osg/Geode& ...
- visio自己画的图怎么填充_VISIO自定义图形填充
有时候我们需要画一些特殊图形,比如以下这个 当然,如果你不嫌麻烦的画,可以画好一个之后复制粘贴,但显然这不是好主意,这时候就需要掌握VISIO自定义图形填充技巧. 第一步:打开绘图资源管理器(基于20 ...
- Python数据分析(三)matplotlib折线图应用实例——自定义图形风格
往期推荐: Python数据分析(一)matplotlib基础绘图和调整x轴刻度 Python数据分析(二)matplotlib折线图应用实例--绘制10点到12点的气温 Python数据分析(四)m ...
- Qt使用C++封装qml自定义图形控件(QQuickPaintedItem)
C++封装qml自定义图形控件 QtWidget.qml简介 通过继承QQuickPaintedItem封装控件 描述 公用接口定义 代码示例 效果图 QtWidget.qml简介 Qt提供了2套UI ...
- python如何画贝塞尔曲线_Python使用matplotlib实现绘制自定义图形功能示例
本文实例讲述了Python使用matplotlib实现绘制自定义图形功能.分享给大家供大家参考,具体如下: 一 代码 from matplotlib.path importPath from matp ...
最新文章
- Codeforces-118D. Caesar's Legions(lazy dynamics)
- nexus搭建maven私服
- 【C++】类型转换简述:四种类型转换方式的说明及应用
- 闽江学院2015-2016学年下学期《软件测试》课程-第三次博客作业
- C++3个汉诺塔递归问题
- 被字句15个_文旅部重新认定国级非遗保护单位,潮州15项花落谁家?这些非遗你都认得吗?...
- get_free_page 和其友
- QGIS展示三维DEM数据
- 怎么将PDF文件在线转换成JPG图片
- mysql 地理空间数据库_地理空间数据库
- 40位UUID, 及一个32位的不知是啥
- RegNet: Designing Network Design Spaces
- CDN真的有用吗?效果好不好
- 2s-AGCN 代码理解
- django+前端+数据库 week1
- 【自动化测试】Pytest+Appium+Allure 做 UI 自动化的那些事
- Linux-hexdump命令调试event驱动
- 人工智能AI主题汇总(至2023年02月11日)
- EXCEL自定义菜单,做插件必备。
- Drools规则属性,高级语法