CSS3 画基本图形,圆形、椭圆形、三角形等
CSS3圆角
#css3-circle{
width: 150px;
height: 150px;
border-radius: 50%;
}
CSS3 椭圆形css3 radius
#css3-elipse{
width: 200px;
height: 100px;
border-radius: 50%;
}
CSS3 三角形
#css3-triangle{
width: 0;
height: 0;
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: 0;
border-bottom: 100px solid #232323;
border-left: 50px solid transparent;
border-right: 50px solid transparent;
}
CSS3 六角星
#css3-six-star{
width: 0;
height: 0;
position: relative;
border-bottom: 100px solid #232323;
border-left: 50px solid transparent;
border-right: 50px solid transparent;
}#css3-six-star:after{
content: "";
width: 0;
height: 0;
position: absolute;
left: -50px;
top: 35px;
border-top: 100px solid #232323;
border-left: 50px solid transparent;
border-right: 50px solid transparent;
}
CSS3 五角星css3 transform
#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: 0;
width: 0;
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: 0;
width: 0;
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: 0;
width: 0;
height: 0;
border-left: 50px solid transparent;
border-right: 50px solid transparent;
border-bottom: 25px solid #232323; }#css3-hexagon:after {
content: "";
position: absolute;
bottom: -25px;
left: 0;
width: 0;
height: 0;
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: 0;
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: 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%;
}
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: 0;
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 画基本图形,圆形、椭圆形、三角形等的更多相关文章
- 纯CSS画的基本图形(圆形、三角形、多边形、爱心、八卦等)
1.圆形 .circle { width: 100px; height: 100px; background: red; border-radius: 50px; } 2.椭圆 .oval { wid ...
- C++ 画星号图形——圆形(核心代码记录)
void Circle::print_char(int x1,int x2) { int i; // 计算这一行的宽度,终端最多显示80列 ; n = n > ? : n; ; i < n ...
- css3 画x图形
.m-act-del{ right:; top:; margin-top: -6px; position: absolute; display: inline-block; width: 20px; ...
- (转)第04节:Fabric.js用路径画不规则图形
在Canvas上画方形.圆形.三角形都是很容易的,只要调用fabric对应的方法就可以了,但这些都是规则的图形,如果你想画一个不规则的图形,这时候你可以用fabric.js提供的路径绘图方法.所谓路径 ...
- 用CSS画一个带阴影的三角形的示例代码
1. 思路 怎么用CSS3画一个带阴影的三角形呢 ? 有童鞋说, 这还不简单吗 网上有很多解决方案, 但其实大多都是实现不太完美的, 存在一些问题 假设我们做一个向下的三角形箭头 常见的方法大致有两种 ...
- CSS之纯CSS画的基本图形(矩形、圆形、三角形、多边形、爱心、八卦等)
图形包括基本的矩形.圆形.椭圆.三角形.多边形,也包括稍微复杂一点的爱心.钻石.阴阳八卦等.当然有一些需要用到CSS3的属性,所以在你打开这篇文章的时候,我希望你用的是firefox或者chrome, ...
- css3画三角形的原理
以前用过css3画过下拉菜单里文字后面的“下拉三角符号”,类似于下面这张图片文字后面三角符号的效果 下面是一个很简单的向上的三角形代码 #triangle-up { width: 0; height: ...
- 关于用CSS3画图形的一些思考
众所周知,用CSS3的圆角.转换可以画出各种不同的形状,制作不同的图案,早些前先驱者已画出经典的叮当猫,iphone手机等展示CSS3的强大实力,趁最近有空我也对CSS3进行了一些实践,颇有收获. 用 ...
- C#判断画的图形是不是三角形
这个源代码写的不是十全十美,只是提供一个 还待完善的地方例如判断是否这个图形是封闭的.得空在解决吧 这只是一个算法上 谁有c#的参考手册网盘分享一份 谢谢 下面请看源码 凑够150个字了,不废话了. ...
随机推荐
- 迈向高阶:优秀Android程序员必知必会的网络基础
1.前言 网络通信一直是Android项目里比较重要的一个模块,Android开源项目上出现过很多优秀的网络框架,从一开始只是一些对HttpClient和HttpUrlConnection简易封装使用 ...
- 第三节:带你详解Java的操作符,控制流程以及数组
前言 大家好,给大家带来带你详解Java的操作符,控制流程以及数组的概述,希望你们喜欢 操作符 算数操作符 一般的 +,-,*,/,还有两个自增 自减 ,以及一个取模 % 操作符. 这里的操作算法,一 ...
- LabVIEW(一):知识入门
一.DAQ基础知识简介 1.DAQ是英文Data Acquisition (数据采集)的缩写. 数据采集(DAQ)是指测量:电压.电流.温度.压力.声音.编码数据等电气或物理现象的过程. 2.数据采集 ...
- 简单读!Mybatis源码(一)一条select的一生
工具除了会用,还应该多做点.我觉得使用一个软件工具(开源类),一般会经历几个步骤: 1. 通过wiki了解大致作用,然后开始码代码: 2. 系统性地学习其特性,找出可能需要的点,用上去: 3. 通过阅 ...
- python常用的十进制、16进制之间的转换
一 整数之间的进制转换: hex(16) # 10进制转16进制 oct(8) # 10进制转8进制 bin(8) # 10进制转2进制 二 字符串转整数 int(') # 字符串转换成10进制整数 ...
- 基于Alpha-Beta剪枝的欢乐斗地主残局辅助
2019年4月17日更新: 将搜索主函数优化为局部记忆化搜索,再次提高若干倍搜索速度 更新了main和player,helper无更新 #include "Player-v3.0.cpp&q ...
- 深度学习Dubbo系列(入门开篇)
此文档为系列学习文档 这系列文档详细讲解了dubbo的使用,基本涵盖dubbo的所有功能特性.在接下来的文章里会详细介绍. 如果你正依赖dubbo作为你业务工程的RPC通信框架,这里可以作为你的参考手 ...
- Flume的各种类型的组件介绍
1. Source NetCat Source:绑定的端口(tcp.udp),将流经端口的每一个文本行数据作为Event输入: type:source的类型,必须是netcat. bind:要监听 ...
- shell脚本命令(记录)
1.重命名文件 将D盘下的A.txt 重命名为B.txt mv D:\\A.txt D:\\B.txt 2.删除文件 删除D盘下的A.txt文件 rm D:\\A.txt 3.修改文件内容并保存 // ...
- SpringBoot 启动概述
透过现象看本质,SpringApplication 只是将一个典型的Spring应用的启动流程进行了扩展,因此,透彻理解 Spring 容器是打开 Spring Boot 大门的一把钥匙. Sprin ...