CSS绘制常见形状的图形
2017-11-30 00:28
501 查看
圆形
.shixinyuan{ width: 100px; height: 100px; background: red; border-radius: 50px; -moz-border-radius:50px; -webkit-border-radius:50px; -o-border-radius:50px; /* border-radius: 50%; 可以使用百分比值(大于或等于50%),但是低版本的Android不支持*/ }
圆环(同心圆)
.konxinyuan{ width: 100px; height: 100px; background: red; position: relative; border-radius: 50px; -moz-border-radius:50px; -webkit-border-radius:50px; -o-border-radius:50px; } .konxinyuan-inner{ width: 80px; height: 80px; background: #fff; position: absolute; left: 50%;top: 50%; margin-left: -40px; margin-top: -40px; border-radius: 50%; z-index: 999; }
上半圆形
.top-half-circle{ width: 100px; height: 50px; background: red; border-radius: 50px 50px 0 0; -moz-border-radius: 50px 50px 0 0; -webkit-border-radius: 50px 50px 0 0; }
左半圆
.left-half-circle{ width: 50px; height: 100px; background: red; border-radius: 50px 0 0 50px; }
四分之一半圆
.quater-circla{ width: 50px; height: 50px; background: red; border-radius: 0 50px 0 0; -webkit-border-radius: 0 50px 0 0; -moz-border-radius: 0 50px 0 0; }
椭圆
.oval{ width: 200px; height: 100px; background: red; border-radius: 100px/50px; /* 水平/垂直*/ }
胶囊椭圆
.capsule{ width: 200px; height: 100px; background: red; border-radius: 50px; }
半个胶囊
.half-capsule{ width: 100px; height: 140px; background: red; border-radius: 50px 50px 0 0 }
鸡蛋
.jidan{ width: 126px; height: 180px; background: red; border-radius: 63px 63px 63px 63px/108px 108px 72px 72px; /* border-radius:50% 50% 50% 50% 50%/60% 60% 40% 40%; */ }
opera浏览器图标
.opera{ width: 258px; height: 275px; background: red; border-radius: 258px/275px; position: relative; } .opera-inner{ width: 122px; height: 230px; background: #fff; border-radius: 122px/230px; position: absolute; left: 50%; margin-left: -61px; top: 50%; margin-top: -115px; }
吃豆人
.chidouren{ width: 0px; height: 0px; border-left: 50px solid red; border-top: 50px solid red; border-bottom: 50px solid red; border-right: 50px solid transparent; /* border-right 的边框颜色不能用#fff,不然会有红色边框*/ border-radius: 50px; }
向上的三角形
.triangle-up{ width: 0; height: 0; border-left: 50px solid transparent; border-right: 50px solid transparent; border-bottom: 100px solid red; float: left } .triangle-up-sm{ width: 0; height: 0; border-left: 50px solid transparent; border-right: 50px solid transparent; border-bottom: 50px solid red; /*border-bottom的数值代表三角形的高度,而border-left和border-right数值的和是三角形的宽度*/ float: left; margin-left: 100px; }
向右的三角形
width: 0; height: 0; border-top: 50px solid transparent; border-bottom: 50px solid transparent; border-left: 100px solid red; } .triangle-right-sm{ width: 0; height: 0; border-top: 50px solid transparent; border-bottom: 50px solid transparent; border-left: 50px solid red; margin-left: 100px; }
左上三角形
.triangle-top-left{ width: 0; height: 0; border-top: 100px solid red; border-right: 100px solid transparent; /* border-left: 100px solid red; border-bottom: 100px solid transparent; */ } .triangle-top-left-lg{ width: 0; height: 0; border-top: 100px solid red; border-right: 50px solid transparent; margin-left: 100px; } .triangle-top-left-sm{ width: 0; height: 0; border-top: 50px solid red; border-right: 100px solid transparent; margin-left: 100px; }
左下三角形
.triangle-left-bottom{ width: 0; height: 0; border-left: 100px solid red; border-top: 100px solid transparent; } .triangle-left-bottom-lg{ width: 0; height: 0; border-left: 50px solid red; border-top: 100px solid transparent; margin-left: 100px; } .triangle-left-bottom-sm{ width: 0; height: 0; border-left: 100px solid red; border-top: 50px solid transparent; margin-left: 100px; }
右上角三角形
.triangle-top-right{ width: 0; height: 0; border-top: 100px solid red; border-left: 100px solid transparent; }
梯形
.tixing-bottom{ border-bottom: 100px solid red; border-left: 50px solid transparent; border-right: 50px solid transparent; width: 100px; height: 0; } .tixing-top{ margin-left: 50px; border-top: 100px solid red; border-left: 50px solid transparent; border-right: 50px solid transparent; width: 100px; }
平行四边形
.pingxingsibianxing{ width: 150px; height: 100px; background: red; transform: skew(20deg); -webkit-transform: skew(20deg); }
六角星
.liujiaoxing{ width: 0; height: 0; border-bottom: 100px solid red; border-left: 50px solid transparent; border-right: 50px solid transparent; position: relative; } .liujiaoxing:before{ content: ""; width: 0; height: 0; border-top: 100px solid red; border-left: 50px solid transparent; border-right: 50px solid transparent; position: absolute; top: 30px; left: -50px; }
五边形
.wubianxing{ width: 54px; height: 0; border-top: 50px solid red; border-right: 18px solid transparent; border-left: 18px solid transparent; position: relative; margin-top: 100px; } .wubianxing:after{ content: ""; width: 0; height: 0; border-bottom: 40px solid red; border-left: 45px solid transparent; border-right: 45px solid transparent; position: absolute; left:-18px; top: -90px; }
菱形
.lingxing{ width: 100px; height: 100px; background: red; transform: rotate(45deg); }
圆锥形
.yuanzhuixing{ width: 0; height: 0; border-top: 100px solid red; border-left: 70px solid transparent; border-right: 70px solid transparent; border-radius: 50%; }
心形
.xinxing{ width: 100px; height: 100px; background: red; position: relative; margin-left: 100px; transform: rotate(45deg); } .xinxing:before{ content: ""; width: 50px; height: 100px; background: red; border-radius: 50px 0 0 50px; position: absolute; left: -50px; } .xinxing:after{ content: ""; width: 100px; height: 50px; background: red; border-radius: 50px 50px 0 0; position: absolute; bottom: 100%; left: 0; }
思路图形
钻石形
.zhuangshi{ width: 0; height: 0; border-top: 80px solid red; border-left: 50px solid transparent; border-right: 50px solid transparent; position: relative; margin-top: 80px; margin-left: 150px; } .zhuangshi::before{ content: ""; border-bottom: 30px solid red; border-left: 20px solid transparent; border-right: 20px solid transparent; width: 60px; position: absolute; top: -110px; left: -50px; }
气泡对话框
.qipaokuan{ width: 250px; height: 120px; background: red; border-radius: 100%; position: relative; margin-left: 150px; } .qipaokuan:before{ content: ""; width: 40px; height: 40px; background: red; border-radius: 100%; position: absolute; left: 0; bottom: -30px; } .qipaokuan:after{ content: ""; width: 20px; height: 20px; background: red; border-radius: 50%; position: absolute; left: -20px; bottom: -45px; }
对话框
.duihuakuang-one{ width: 220px; height: 100px; background: #fff; border:2px solid #ddd; position: relative; } .duihuakuang-one:before{ content: ""; width: 0; height: 0; border-top: 30px solid #ddd; border-left: 25px solid transparent; border-right: 25px solid transparent; position: absolute; left: 60px; top: 100px; } .duihuakuang-one:after{ content: ""; width: 0; height: 0; border-top: 30px solid #fff; border-left: 25px solid transparent; border-right: 25px solid transparent; position: absolute; left: 60px; top: 98px; z-index: 999; }
相关文章推荐
- 用CSS绘制最常见的40种形状和图形
- 用CSS绘制最常见的形状和图形
- CSS 魔法系列:纯 CSS 绘制图形(各种形状的钻石)
- 用css绘制常见图形
- CSS3新特性,绘制常见图形
- css绘制特殊图形
- CSS各种图形绘制
- CSS 魔法系列:纯 CSS 绘制图形(心形、六边形等)
- CSS绘制简单图形
- CSS 魔法系列:纯 CSS 绘制各种图形《系列六》
- 史上最强大的40多个纯CSS绘制的图形
- 绘制常见图形
- css绘制常见的几何图形
- Java中常见图形绘制方式与实现
- 纯CSS画的基本图形技巧绘制(矩形、圆形、三角形、多边形、爱心、八卦等)
- 美轮美奂-随机绘制不同形状、色彩、大小、位置的图形
- 【Cocoa(mac) Application 开发系列之三】自定义NSView并绘制一些常见的图形及字符串;
- CSS代码写出的各种形状图形
- 【转】用CSS代码写出的各种形状图形的方法
- CSS代码实例:用CSS代码写出的各种形状图形