纯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"> . ...

随机推荐

『TensorFlow』读书笔记_Inception_V3_上
1.网络背景自2012年Alexnet提出以来,图像分类.目标检测等一系列领域都被卷积神经网络CNN统治着.接下来的时间里,人们不断设计新的深度学习网络模型来获得更好的训练效果.一般而言,许多网络结 ...
python网络爬虫&&爬取网易云音乐
#爬取网易云音乐 url="https://music.163.com/discover/toplist" #歌单连接地址 url2 = 'http://music.163.com ...
UTC,BJT时间的换算
题目内容:UTC是世界协调时,BJT是北京时间,UTC时间相当于BJT减去8.现在,你的程序要读入一个整数,表示BJT的时和分.整数的个位和十位表示分,百位和千位表示小时.如果小时小于10,则没有千位 ...
input date
https://stackoverflow.com/questions/17954966/how-to-get-rid-of-x-and-up-down-arrow-elements-of-a-inp ...
Python---高级函数map, filter, zip, enumerate等的用法
今天看自然语言处理这本书的时候,被这里的高级函数的概念吸引了,因为我觉得所有的函数都只是函数而已,是为了实现特定功能而实现的,不应该有高级,低级之分啊!不过了解之后,发现这几个函数确实是有点高级,非常 ...
linux服务管理服务启动和自启动
服务启动和自启动 '服务启动' 就是在当前系统中让服务运行,并提供功能 '服务自启动' 自启动是指服务在系统开机或重启动之后,随着启动系统的启动而自动启动服务服务自启动 [root@ssgao198 ...
Json转换工具
import java.util.List; import com.fasterxml.jackson.core.JsonProcessingException; import com.fasterx ...
L330 Black hole picture captured for first time in space ‘breakthrough’
Black hole picture captured for first time in space ‘breakthrough’ Astronomers have captured the fir ...
Java的基本数据类型大小及其包装类
Java的基本数据类型变量就是申请内存来存储值.也就是说,当创建变量的时候,需要在内存中申请空间. 内存管理系统根据变量的类型为变量分配存储空间,分配的空间只能用来储存该类型数据. 因此,通过定义 ...
vue 关于solt得用法
solt 第一种用法父组件 <templateSolt></templateSolt> <templateSolt> <p>slot分发了内容< ...

纯CSS制作图形效果

正方形

长方形

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

随机推荐

热门专题