纯css画出的图形——html5

最新推荐文章于 2023-01-02 21:27:42 发布
最新推荐文章于 2023-01-02 21:27:42 发布
阅读量1.4k 收藏
点赞数
分类专栏： html/css/javascript HTML5
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/cangkukuaimanle/article/details/8148167
版权

复制下面代码，保存为.html格式

<html>
<head>
</head>
<style type="text/css">
    #square
    {
        width: 100px;
        height: 100px;
        background: red;
    }
    #rectangle
    {
        width: 200px;
        height: 100px;
        background: red;
    }
    #circle
    {
        width: 100px;
        height: 100px;
        background: red;
        -moz-border-radius: 50px;
        -webkit-border-radius: 50px;
        border-radius: 50px;
    }
    #oval
    {
        width: 200px;
        height: 100px;
        background: red;
        -moz-border-radius: 100px/50px;
        -webkit-border-radius: 100px/50px;
        border-radius: 100px/50px;
    }
    #triangle-up
    {
        width: 0px;
        height: 0px;
        border-left: 50px solid transparent;
        border-right: 50px solid transparent;
        border-bottom: 100px solid red;
    }
    #triangle-down
    {
        width: 0px;
        height: 0px;
        border-left: 50px solid transparent;
        border-right: 50px solid transparent;
        border-top: 100px solid red;
    }
    #triangle-left
    {
        width: 0px;
        height: 0px;
        border-top: 50px solid transparent;
        border-bottom: 50px solid transparent;
        border-right: 100px solid red;
    }
    #triangle-right
    {
        width: 0px;
        height: 0px;
        border-top: 50px solid transparent;
        border-bottom: 50px solid transparent;
        border-left: 100px solid red;
    }
    #triangle-topleft
    {
        width: 0px;
        height: 0px;
        border-top: 100px solid red;
        border-right: 100px solid transparent;
    }
    #triangle-topright
    {
        width: 0px;
        height: 0px;
        border-top: 100px solid red;
        border-left: 100px solid transparent;
    }
    #triangle-leftbottom
    {
        width: 0px;
        height: 0px;
        border-bottom: 100px solid red;
        border-right: 100px solid transparent;
    }
    #triangle-rightbottom
    {
        width: 0px;
        height: 0px;
        border-bottom: 100px solid red;
        border-left: 100px solid transparent;
    }
    #parallelogram
    {
        width: 150px;
        height: 100px;
        margin-left: 20px;
        -webkit-transform: skew(20deg);
        -moz-transform: skew(20deg);
        -o-transform: skew(20deg);
    }
    #trapezoid
    {
        border-bottom: 100px solid red;
        border-left: 50px solid transparent;
        border-right: 50px solid transparent;
        height: 0;
        width: 100px;
    }
    #star-six
    {
        width: 0;
        height: 0;
        border-left: 50px solid transparent;
        border-right: 50px solid transparent;
        border-bottom: 100px solid red;
        position: relative;
    }
    #star-six:after
    {
        width: 0;
        height: 0;
        border-left: 50px solid transparent;
        border-right: 50px solid transparent;
        border-top: 100x solid red;
        position: absolute;
        content: "";
        top: 30px;
        left: -50px;
    }
    #star-five
    {
        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);
    }
    #star-five: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);
    }
    #star-five: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);
        content: '';
    }
    #yin-yang
    {
        width: 96px;
        height: 48px;
        background: #eee;
        border-color: red;
        border-style: solid;
        border-width: 2px 2px 50px 2px;
        border-radius: 100%;
        position: relative;
    }
    
    #yin-yang:before
    {
        content: "";
        position: absolute;
        top: 50%;
        left: 0;
        background: #eee;
        border: 18px solid red;
        border-radius: 100%;
        width: 12px;
        height: 12px;
    }
    
    #yin-yang:after
    {
        content: "";
        position: absolute;
        top: 50%;
        left: 50%;
        background: red;
        border: 18px solid #eee;
        border-radius: 100%;
        width: 12px;
        height: 12px;
    }
</style>
<body>
    <p>
        <div id="square">
        </div>
    </p>
    <p>
        <div id="rectangle">
        </div>
    </p>
    <p>
        <div id="circle">
        </div>
    </p>
    <p>
        <div id="oval">
        </div>
    </p>
    <p>
        <div id="triangle-up">
        </div>
    </p>
    <p>
        <div id="triangle-down">
        </div>
    </p>
    <p>
        <div id="triangle-left">
        </div>
    </p>
    <p>
        <div id="triangle-right">
        </div>
    </p>
    <p>
        <div id="triangle-topleft">
        </div>
    </p>
    <p>
        <div id="triangle-topright">
        </div>
    </p>
    <p>
        <div id="triangle-leftbottom">
        </div>
    </p>
    <p>
        <div id="parallelogram">
        </div>
    </p>
    <p>
        <div id="trapezoid">
        </div>
    </p>
    <p>
        <div id="star-six">
        </div>
    </p>
    <p>
        <div id="star-five">
        </div>
    </p>
    <p>
        <div id="yin-yang">
        </div>
    </p>
</body>
</html>

用支持Html5的浏览器firefox,chrome，IE9等打开

cangkukuaimanle
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
还在手动生成图像？太low了！来试试CSS Painting API 自动生成图像的快感！
huz1lu的博客
03-02 781
图像为应用程序增添色彩，丰富内容。然而，如果网页中嵌入了大量高分辨率图像，会大量增加页面资源加载时间，严重影响用户体验。对于展示产品、方案等必须内容的图像，我们别无选择，只能按照正常方式嵌入这些图像并通过缓存它们来优化应用程序。但是，如果我们在应用程序中需要几何图像，则不必再将其作为资源来加载。 我们可以使用 CSS Painting API 即时生成几何图像。 让我们一起来走进这个 API，并且学习如何使用它生成图像吧～ CSS Painting API 的简介 开发者们能够使用 CSS Pa
css动画在线生成,在线制作css动画——cssanimate
weixin_36361396的博客
08-03 2684
熟悉CSS的人都知道，CSS可以实现很多漂亮的动画，特别是它的在线功能，能够帮助人们解决很多制作动画的效果。今天特别推荐一个在线CSS插件功能——cssanimate，这个最大的特色就是以图形界面方式让你轻易实现漂亮的CSS3动画效果，下面一起看看这个在线工具的介绍。CSS3动画制作工具界面介绍Timeline(时间轴)Timeline是引导动画的重要区域，就像制作逐帧动画一样，可以调整每帧的内容...
linux 终端打印圣诞树,1021字节javascript写成的3D圣诞树
weixin_33390343的博客
05-07 1341
源码如下：JS1k, 1k demo submission [856]var b = document.body;var c = document.getElementsByTagName('canvas')[0];var a = c.getContext('2d');document.body.clientWidth; // fix bug in chrome.// start of subm...
html5绘制圣诞树,HTML5实现圣诞树效果
weixin_32723617的博客
06-26 1916
html5写的3D逼真圣诞树效果 html, body { width: 100%; height: 100%; margin: 0; padding: 0; border: 0; } div { margin: 0; padding: 0; border: 0; } .nav { position: absolute; top: 0; left: 0; width:...
JavaWeb基础4——HTML,JavaScript&CSS
vincewm的博客
07-24 9425
HTML,JavaScript&CSS、元素、标签、css 选择器、属性、JavaScript基础语法、JavaScript对象、BOM浏览器对象模型、DOM文档对象模型、事件监听、正则对象RegExp/ES6
HTML+css animation动画效果——做一个五角星轨迹运动
breakCSDN的博客
10-23 1746
内部有完整的页面代码！！！！ keyframes-selector ：动画持续时间的百分比。合法值：0-100% from (和0%相同) to (和100%相同)
1.6 前端设计——HTML5+Javascript+CSS基础
buaa_sheng的专栏
04-01 1170
前端设计时，为了兼容微信内置浏览器，我们采用H5页面的方式进行设计，设计界面时，我们必须充分考虑当前界面是要适配手机操作的。 结合前面的介绍，本章结束时，我们能够完成一个简单的小项目（程序）——选课系统，这个项目是可以运行在微信浏览器中的，我们将该项目的演示界面和网址放到下面，读者可以通过微信扫一扫进行访问： 扫描上述二维码后，可以看到下面的界面 读者可以选择一个角色进行模拟操作，例如点选“我是学生”，则出现下面选择你要扮演的学生 点击你要扮演的学生图标，则可以看到学生可以...
html 多层画布,HTML画布——canvas
weixin_42117485的博客
07-20 814
HTML5画布——canvasHTML5元素用于图形的绘制，通过脚本 (通常是JavaScript)来完成.标签只是图形容器，您必须使用脚本来绘制图形。你可以通过多种方法使用Canva绘制路径,盒、圆、字符以及添加图像1、如何创建一个画布？contentcontent中的内容是当浏览器不支持canvas标签时显示的内容content定义一个有边框的画布，border属性是边框的宽度和边框的颜色2、...
CSS基础学习——动画
qq_41890177的博客
08-26 1万+
一、CSS3 2D变形（利用Transfrom方法） 1、rotate（angle） 元素顺时针旋转给定的角度。允许负值，元素将逆时针旋转。 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> </head> <style> div{ width: 100px
HTML5和CSS3 WEB技术开发
最新发布
张晨光老师的播客
01-02 5986
B站视频参考：https://www.bilibili.com/video/BV1H44y1k7ze/[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-Uwbid43Z-1672665963237)(asseits/image-20210831212039584.png)]HTML:超文本标记语言(Hyper Text Markup Language)，标准通用标记语言下的一个应用。 HTML 不是一种编程语言（C、Java、python、R等），而是一种标记语言 (markup
HTML5+CSS3期末大作业——城市简介源码
05-05
在这个“HTML5+CSS3期末大作业——城市简介源码”项目中，学生或开发者将有机会实践这两门技术，构建一个介绍特定城市的网页。 HTML5作为最新的超文本标记语言版本，引入了许多新特性，旨在提高网页的交互性和可用...
纯css3实现各种图形样式.zip
11-25
这个名为"纯css3实现各种图形样式"的压缩包显然是一份关于如何利用CSS3技术创建不同图形的教程或者示例集合。 首先，让我们来探讨CSS3的核心特性之一——选择器。CSS3引入了更精确的选择器，如伪类（`:hover`, `:...
CSS3 +HTML5入门到精通
07-01
【标题】"CSS3 +HTML5入门到精通"与【描述】"《HTML+5+从入门到精通》-中文学习教程"所涵盖的知识点主要围绕着Web开发的基础技术——HTML5和CSS3展开，这两者是现代网页设计与开发不可或缺的组成部分。以下是关于这...
html5的画布canvas——画出弧线、旋转的图形实例代码+效果图
09-28
总结一下，HTML5 Canvas提供了丰富的图形绘制功能，包括画弧线、旋转图形、绘制文本以及应用渐变效果。通过熟练掌握这些API，开发者可以创建出复杂的动态图形和交互式界面，极大地增强了网页的视觉表现力。在实际...
css3bianqian_HTML5_CSS3源码_
10-01
【标签】：“HTML5_CSS3源码” 表明这个压缩包里的主要内容是编程代码，使用了现代Web开发的两个关键语言——HTML5和CSS3。HTML5用于构建网页结构，而CSS3则负责网页的样式和布局，包括高级的图形和动画效果。 以下...
JQuery插件让图片旋转任意角度且代码极其简单
热门推荐
cangkukuaimanle——你满了么
03-31 4万+
引入下方的jquery.rotate.js文件，然后通过$("选择器").rotate(角度);可以旋转任意角度， 例如$("#rotate-image").rotate(45);把这句放在$(document).ready(function(){ });中 就是将id为rotate-image的图片旋转45度。 不过，貌似在Chrome中总是不显示。 唉，找了两个小时，才发现Chrome
人体艺术之时钟
cangkukuaimanle——你满了么
09-24 3万+
它的效果呢如下面所示
固定浮动窗positioin:fixed浏览器(IE6 IE7 IE8 IE9 Chrome Firfox)兼容性解决方案
cangkukuaimanle——你满了么
03-29 1万+
固定浮动窗就是固定在浏览器某个位置，不随滚动条而变动的窗体。 先贴代码： #fixed{position:fixed;top:5em;right:0;} html{overflow:hidden;} body{height:100%;overflow:auto;} #fixed{position:absolute;right:30px;top:expression(eval(
CKEditor插件的使用
cangkukuaimanle——你满了么
10-24 1万+
富文本编辑很多地方需要用到，其中比较有名的是CKEditor，以前叫FCKEditor，虽然百度出的UEditor也比较火，但还是老牌子好用。 首先，去官网http://www.ckeditor.com下载最新版3.6.5的。然后删除_samples和_source文件夹，在项目根目录下新建个文件夹，名字自己估摸着起，叫ckeditor吧，然后把剩余的全部拷贝进去。初步的配置就这样。 下面是使
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值