纯CSS制作图形效果

下面所有的例子都是在demo.html的基础上添加相关样式实现的。

<!DOCTYPE html>

<html>

<head>

<meta charset="UTF-8">

<style type="text/css">

        .demo{

            margin:100px auto;

        }

</style>

</head>

<body>

    <div class="demo">

    </div>

</body>

</html>

正方形

.demo{width:100px;height:100px;background:red;}

长方形

.demo{width:100px;height:150px;background:red;}

圆形

.demo{width:100px;height:100px;background:red;border-radius:50%;}

半圆

.demo{width:100px;height:50px;background:red;border-radius:100px 100px 0 0 ;}

扇形

.demo{background:none repeat scroll 0 0 red;border-radius:50px 0 0 0;height:50px;width:50px;}

椭圆

.demo{width:200px;height:100px;border-radius:100px / 50px;background:red;}

三角朝上

.demo{width:0;height:0;border:50px solid red;border-color:transparent transparent red;}

三角朝下

.demo{width:0;height:0;border:50px solid red;border-color:red transparent transparent;}

三角朝左

.demo{width:0;height:0;border:50px solid red;border-color: transparent red transparent transparent;}

三角朝右

.demo{width:0;height:0;border:50px solid red;border-color: transparent  transparent transparent red;}

左上三角形

.demo{width:0px;height:0px;border:100px solid red;border-color:red transparent transparent red;}

平行四边形

.demo{width:150px;height:100px;transform:skew(20deg);background:red;}

梯形

.demo{height:0;width:100px;border-bottom:100px solid #e5c3b2;border-left:60px solid transparent;border-right:60px solid transparent;}

梯形

.demo{height:100px;width:0;border-right:100px solid #e5c3b2;border-top:60px solid transparent;border-bottom:60px solid transparent;}

图表

.demo{height:0px;width:0px;border:50px solid red;border-radius:50px;border-color:purple red yellow orange;}

六角星

.demo{

    width:0;

    height:0;

    border-left:50px solid transparent;

    border-right:50px solid transparent;

    border-bottom:100px solid red;

    position:relative;

}

.demo:after{

    width:0;

    height:0;

    border-left:50px solid transparent;

    border-right:50px solid transparent;

    border-top:100px solid red;

    position:absolute;

    content:"";

    top:30px;

    left:-50px;

}

五角星

.demo{

   margin: 50px 0;

   position: relative;

   display: block;

   color: red;

   width: 0px;

   height: 0px;

   border-right: 100px solid transparent;

   border-bottom: 70px solid red;

   border-left: 100px solid transparent;

   -moz-transform: rotate(35deg);

   -webkit-transform: rotate(35deg);

   -ms-transform: rotate(35deg);

   -o-transform: rotate(35deg);

   transform: rotate(35deg);

}

        .demo:before{

            border-bottom: 80px solid red;

            border-left: 30px solid transparent;

            border-right: 30px solid transparent;

            position: absolute;

            height: 0;

            width: 0;

            top: -45px;

            left: -65px;

            display: block;

            content: '';

            -webkit-transform: rotate(-35deg);

            -moz-transform: rotate(-35deg);

            -ms-transform: rotate(-35deg);

            -o-transform: rotate(-35deg);

            transform: rotate(-35deg);

        }

        .demo:after{

            position: absolute;

                display: block;

                color: red;

                top: 3px;

                left: -105px;

                width: 0px;

                height: 0px;

                border-right: 100px solid transparent;

                border-bottom: 70px solid red;

                border-left: 100px solid transparent;

                -webkit-transform: rotate(-70deg);

                -moz-transform: rotate(-70deg);

                -ms-transform: rotate(-70deg);

                -o-transform: rotate(-70deg);

                transform: rotate(-70deg);

                content: '';

        }

彩带

.demo{

            width:0;

            height:100px;

            border-left:50px solid red;

            border-right:50px solid red;

            border-bottom:35px solid transparent;

        }

心形

.demo{

            position: relative;

            width: 100px;

            height: 90px;

        }

        .demo:before,.demo:after{

            position: absolute;

            content: "";

            left: 50px;

            top: 0;

            width: 50px;

            height: 80px;

            background: red;

            -moz-border-radius: 50px 50px 0 0;

            -webkit-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%;

        }

        .demo: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%;

        }

pac-man

.demo{

            width: 0px;

            height: 0px;

            border: 60px solid red;

            border-color: red transparent red red ;

            -moz-border-radius: 60px;

            -webkit-border-radius: 60px;

            border-radius: 60px;

        }

对话泡泡

.demo{

            width:120px;

            height:80px;

            background:red;

            position:relative;

            border-radius:10px;

        }

        .demo:before{

            content:'';

            position:absolute;

            right:100%;

            top:26px;

            width:0;

            height:0;

            border-top:13px solid transparent;

            border-right:26px solid red;

            border-bottom:13px solid transparent;

        }

Point Burst

.demo{

            background: red;

            width: 80px;

            height: 80px;

            position: relative;

            text-align: center;

        }

        .demo:before,.demo:after{

            content: "";

            position: absolute;

            top: 0; left: 0;

            height: 80px;

            width: 80px;

            background: red;

        }

        .demo:before{

            -webkit-transform: rotate(30deg);

                -moz-transform: rotate(30deg);

                -ms-transform: rotate(30deg);

                -o-transform: rotate(30deg);

                transform: rotate(30deg);

        }

        .demo:after{

            -webkit-transform: rotate(60deg);

            -moz-transform: rotate(60deg);

            -ms-transform: rotate(60deg);

            -o-transform: rotate(60deg);

            transform: rotate(60deg);

        }

阴阳图

.demo{

            width: 96px;

            height: 48px;

            background: #eee;

            border-color: red;

            border-style: solid;

            border-width: 2px 2px 50px 2px;

            border-radius: 100%;

            position: relative;

        }

        .demo:before{

            content: "";

            position:

            absolute;

            top: 50%;

            left: 0;

            background: #eee;

            border: 18px solid red;

            border-radius: 100%;

            width: 12px;

            height: 12px;

        }

        .demo:after{

            content: "";

            position: absolute;

            top: 50%;

            left: 50%;

            background: red;

            border: 18px solid #eee;

            border-radius:100%;

            width: 12px;

            height: 12px;

        }

学习网站：https://cssicon.space/#/

纯CSS制作图形效果的更多相关文章

利用CSS制作图形效果
前言关于如何使用CSS来制作图形,比如说圆形,半圆形,三角形等的相关教程还是挺多的,今天我主要想解释一下里面一些demo的实现原理,话不多说,开始吧以下所有内容只使用一个HTML元素.任何类型 ...
如何使用纯CSS制作特效导航条？
先上张图,如何使用纯 CSS 制作如下效果? 在继续阅读下文之前,你可以先缓一缓.尝试思考一下上面的效果或者动手尝试一下,不借助 JS ,能否巧妙的实现上述效果. OK,继续.这个效果是我在业务开发的 ...
【转】CSS制作图形速查表-存档
http://www.w3cplus.com/css/css-simple-shapes-cheat-sheet http://www.cnblogs.com/powertoolsteam/p/c ...
利用target的特性，可以实现纯css的tab效果切换
基础知识: :target起作用的是href连接到的位置如 <a href="#tab1">tab1</a> <div id="tab1& ...
CSS 魔法系列：纯 CSS 绘制图形（心形、六边形等）
<CSS 魔法系列>继续给大家带来 CSS 在网页中以及图形绘制中的使用.这篇文章给大家带来的是纯 CSS 绘制五角星.六角形.五边形.六边形.心形等等. 我们的网页因为 CSS 而呈现千 ...
纯 CSS 实现波浪效果！
一直以来,使用纯 CSS 实现波浪效果都是十分困难的. 因为实现波浪的曲线需要借助贝塞尔曲线. 而使用纯 CSS 的方式,实现贝塞尔曲线,额,暂时是没有很好的方法. 当然,借助其他力量(SVG.CAN ...
No.5 - 纯 CSS 制作绕中轴旋转的立方体
body{ background-color: #000; margin:; padding:; } main{ perspective: 800px; } .cube{ transform-styl ...
纯CSS制作空心三角形和实心三角形及其实现原理
纯CSS制作空心三角形和实心三角形及其实现原理在一次项目中需要使用到空心三角形,我瞬间懵逼了.查阅了一些资料加上自己的分析思考,终于是达到了效果,个人感觉制作三角形是使用频率很高的,因此记录下来,供 ...
每日CSS_纯CSS制作进度条
每日CSS_纯CSS制作进度条 2020_12_26 源码 1. 代码解析 1.1 html 代码解析设置整个容器 <div class="container"> . ...

随机推荐

Servlet的5种方式实现表单提交
http://www.cnblogs.com/zhanghaoliang/p/5622900.html
mysql数据库的基础操作
注 : 本文中注释因为方便写了# ,mysql中规范应为 -- 创建用户通过root管理员权限可以创建各种用户,并为他们分配权限及可以操作的数据库. 语法:create user '用户名'@'ip ...
Dockerfile命令大全
Dockerfile 制作Dockerfile为Docker入门学习的第一步. Dockerfile可以快速的帮助我们去构建镜像, 是在工作中必备的一项技能, 下面整理了一些命令 FROM 功能为指定 ...
设计图与html 对比
简易打开旧版火狐网页版火狐添加组件新版有时也会没有谷歌是腾讯的
c# Excel 行高、列宽、合并单元格、单元格边框线、冻结
http://www.2cto.com/kf/201007/52724.html 新增选择整列: Range = ((Range)(WALeTieSheet.Cells[1, PwCStartCol_ ...
html5（四） canvas
http://www.cnblogs.com/Gyoung/archive/2013/04/08/2994515.html
box-sizing的用法
默认情况下设置盒子的width是指内容区域,所以在设置边框会使得盒子往外扩张,如果要让css设置的width就是盒子最终的宽度,那么就要设置box-sizing:border-box, ...
OpenCV学习（一）基础篇
OpenCV 2 计算机视觉编程手册读书笔记1 矩阵创建 Mat类是OpenCV中非常有用类,用来创建和操作多维矩阵.可以有很多方法构造它. // 构造函数 //! constructs 2D mat ...
python自学第13天 hashlib,re模块
import hashlib sha=hashlib.sha3_512()#定义加密成什么格式 sha.update('how to use sha1 in 年后 '.encode('utf-8')) ...
IO调度算法的理解（转载）
IO调度器(IO Scheduler)是操作系统用来决定块设备上IO操作提交顺序的方法.存在的目的有两个,一是提高IO吞吐量,二是降低IO响应时间.然而IO吞吐量和IO响应时间往往是矛盾的,为了尽量平 ...

纯CSS制作图形效果

正方形

长方形

纯CSS制作图形效果的更多相关文章

随机推荐

热门专题