用HTML编写各式各样的图形

最新推荐文章于 2023-09-10 19:11:55 发布
最新推荐文章于 2023-09-10 19:11:55 发布
阅读量3.3k 收藏 14
点赞数 7
分类专栏： HTML5 文章标签： html5
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/lxl513513/article/details/105029933
版权

一.圆环

1.代码部分

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <style type="text/css">
     #one{
     	width: 400px;
     	height: 400px;
     	background-color: #93baff;
     	border-radius: 200px;
 }
 #two{
 	width: 200px;
 	height: 200px;	
 	position: relative;
 	left:100px;
 	top: 100px;
 	background-color: white;
 	border-radius:100px;
 }
    </style>
</head>
<body>
	<div id="one">
		<div id="two"></div> 
	</div>
</body>
</html>

2.效果图

在这里插入图片描述

二.四色板

1.代码部分

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <style type="text/css">
       #one{
       	width: 0;
       	border-top:100px solid #FF898E; 
        border-bottom: 100px solid #C89386;
       	border-left: 100px solid #FFB151;
       	border-right: 100px solid #93BAFF;

       }
    </style>
</head>
<body>
	<div id="one"></div>
</body>
</html>

2.效果图

在这里插入图片描述

三.八色板

1.代码部分


```css
```css
<!DOCTYPE html>
<html><head><meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
    
    <style type="text/css">
        #o{
          position: center;
        }
       #one{
       	width: 0;
       	border-top:20px solid #92D050; 
        border-bottom: 20px solid #FFFF00;
       	border-left: 20px solid #92D050;
       	border-right: 20px solid #FFFF00;
       }
       #two{
        width: 0px;
        border-top:20px solid #FF0000; 
        border-left: 20px solid #0070C0;
        border-right: 20px solid #FF0000;
        border-bottom: 20px solid #0070C0;
        position: relative;
        left: 40px;
        top: -80px;
       }
       #three{
        width: 0px;
        border-top:20px solid black; 
        border-left: 20px solid #7030A0;
        border-right: 20px solid black;
        border-bottom: 20px solid #7030A0;
       }
       #four{
        width: 0px;
        border-top:20px solid white; 
        border-left: 20px solid white;
        border-right: 20px solid #00B0F0;
        border-bottom: 20px solid #00B0F0;
        position: relative;
        left: 40px;
        top: -80px;
       }
    </style>
</head>
<body>
    <div id="o">
	   <div id="one"></div>
     <div id="three"></div>
     <div id="two"></div>
     <div id="four"></div>
      </div> 

</body></html>

2.效果图

在这里插入图片描述

四.八色板2

1.代码部分

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <style type="text/css">
       #one{
        width: 0;
        border-top:20px solid #FF0000; 
        border-bottom: 20px solid #70AD47;
        border-left: 20px solid #70AD47;
        border-right: 20px solid #FF0000;
       }
       #two{
        width: 0px;
        border-top:20px solid #44546A; 
        border-left: 20px solid #44546A;
        border-right: 20px solid #FFFF00;
        border-bottom: 20px solid #FFFF00;
        position: relative;
        left: 40px;
        top: -80px;
       }
       #three{
        width: 0px;
        border-top:20px solid #7030A0; 
        border-left: 20px solid #7030A0;
        border-right: 20px solid #002060;
        border-bottom: 20px solid #002060;
       }
       #four{
        width: 0px;
        border-top:20px solid #FFC000; 
        border-left: 20px solid #00B0F0;
        border-right: 20px solid #FFC000;
        border-bottom: 20px solid #00B0F0;
        position: relative;
        left: 40px;
        top: -80px;
       }
    </style>
</head>
<body>
     <div id="one"></div>
     <div id="three"></div>
     <div id="two"></div>
     <div id="four"></div>
</body>
</html>

2.效果图

在这里插入图片描述

五.五角星

1.代码部分

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <style type="text/css">
    #one {
      margin: 70px 0;
      position: relative;
      display: block;
      color: #5B9BD5;
      width: 0px;
      height: 0px;
      border-right:  100px solid transparent;
      border-bottom: 80px  solid #5B9BD5;
      border-left:   100px solid transparent;
      
  }
    #one:before {
      border-bottom: 80px solid #5B9BD5;
      border-left: 30px solid transparent;
      border-right: 30px solid transparent;
      position: absolute;
      height: 0;
      width: 0;
      top: -45px;
      left: -65px;
      display: block;
      content: '';
      transform: rotate(-35deg);

  }
    #one:after {
      position: absolute;
      display: block;
      color: #5B9BD5;
      top: 3px;
      left: -105px;
      width: 0px;
      height: 0px;
      border-right: 100px solid transparent;
      border-bottom: 70px solid #5B9BD5;
      border-left: 100px solid transparent;
      transform: rotate(-70deg);
      content: '';
  }
    </style>
</head>
<body>
	   <div id="one"></div>
</body>
</html>

2.效果图

在这里插入图片描述

六.爱心

1.代码部分

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
   <style type="text/css">
      div{
        position: absolute;
        left: 200px;
        top: 200px;
      }
       #one{
   			background-color: red;
   			height: 100px;
   			width: 100px;
   			transform: rotate(45deg);
   		}
   		#one:before{
        height: 100px;
        width: 100px;
        display: block;
        position: absolute;
        left:-45px;
        top:-0px;
        border-radius: 50px;
        background-color: red;
        content: " ";
      }
      #one:after{
        height: 100px;
        width: 100px;
        display: block;
        position: absolute;
        left:0px;
        top:-45px;
        border-radius: 50px;
        background-color: red;
        content: " ";
      }
    </style>
</head>
<body>
<div id="one"></div>
</body>
</html>

2.效果图

在这里插入图片描述

lxl。。
关注
  • 7
    点赞
  • 踩
  • 14
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
前端学习7：HTML图像、表格、列表
RainstormGod的博客
04-13 1224
自定义列表不仅是一列项目，还是项目及其注释的组合。自定义列表以标签开始。每个自定义列表项以开始。每个自定义列表项的定义以 开始。
HTML图形
前端小白的成长之路
05-29 238
画布： HTML5 的 canvas 元素使用 JavaScript 在网页上绘制图像，一个画布就是一个矩形区域 基本定义： <canvas id="myCanvas" width="200" height="100"></canvas> 具体画布里的图像绘制通过JS来实现（示例：矩形） <script type="text/javascript"> var c=document.getElementById("myCanvas");通过ID来查找元素 va
html.线段绘图
最新发布
qq_60597540的博客
09-10 374
HTML提供了元素，可以使用JavaScript在网页上绘制各种形状，包括线段、圆形、三角形、圆柱形和五角星等。
HTML每日学习代码：绘制图形
Zb_Xl的博客
07-10 2306
第一个控制点 (cpX1,cpY1) 控制的是曲线离起点的偏离程度和方向，而第二个控制点 (cpX2,cpY2) 控制的是曲线离终点的偏离程度和方向。createLinearGradient(0, 0, 0, c.height) 创建的线性渐变对象会从画布的左上角 (0, 0) 开始，延伸到画布的左下角 (0, c.height)。在这个方法中，offset 参数表示渐变的位置，取值范围为 0 到 1，代表了当前位置相对于渐变起点和终点之间的距离比例。r0 是起点圆的半径，r1 是终点圆的半径。
HTML每日学习代码：图像
Zb_Xl的博客
07-11 202
在这个代码中我们要在canvas上绘制的是一个叫1的jpg文件，我是用pycharm写的HTML代码，我把文件放在根目录下，这里呢，先聊一下根目录吧，刚开始学编程的时候，接触这个概念很迷茫的，只接触到了术语，术语是什么意思没讲(╯`Д´)╯︵ ┻━┻。我在这里解释一下什么是根目录，在计算机文件系统中，最顶层的目录或者是文件系统的起始点就是根目录，除此之外还有父目录和子目录，咱们来看张图理解他们的关系。今天学的最好玩的就是将图形像素处理，但是朋友们觉得我像素化处理的图吓人(╥﹏╥)将250换成不同数字即可。
图片 制作html代码,用HTML代码制作的各种图片效果
weixin_32272937的博客
07-01 3136
一.贴图的基础代码代码为:src="uploadpic/2006102421152447531.jpg"width=350>二.淡化边缘效果代码为:style="FILTER: Alpha(opacity=100,style=1)"src="uploadpic/2006102421152447531.jpg"width=350>代码为:style="FILTER: Alpha(opac...
html中形状代码,用css与div代码绘制一些常见的各种形状的图形
weixin_39652658的博客
06-03 1181
在制作网页的时候我们为了增添页面的美观性，会在页面中添加一些图案或者将页面部分区块设置为特殊形状.如果全部使用图片会使页面体积增大，造成加载速度慢等问题,那么怎样使用div+css实现一些简单的图形绘制呢？在div+css布局时，我们一般是在页面中绘制一个个矩形，然后使用浮动来控制页面中矩形所在的位置代码如下：.juxing {width: 500px;height: 100px;}需要用css绘...
html 超全代码 各式各样菜单
10-26
这个文件可能展示了如何用HTML和CSS创建与Flash相媲美的动态导航菜单。 通过研究这些不同的HTML菜单代码，开发者可以学习到如何创建多样化、交互性强的网页导航元素，提高用户体验，同时也可以了解不同设计趋势和...
VB 填充选择的封闭图形区域
05-01
内容索引:VB源码,图形处理,填充图像　用VB填充各式各样的封闭图形区域，可自定义系统预设的几种颜色，如果需要更多颜色可自行修改代码即可，通过这个程序我们可了解到如何使用VB定义和选择、恢复画刷，如果填充图形...
html画圣诞树合集.rar
12-24
在这个名为“html画圣诞树合集.rar”的压缩包中，我们很显然会发现一系列用HTML编写的代码示例，它们展示了如何利用HTML来绘制出各式各样的圣诞树图形。这种实践方式既富有创意，又可以帮助学习者深入理解HTML的基本...
html设计带图形的边框,css怎么设置图片的边框？
weixin_35971708的博客
06-04 979
css设置图片边框的方法：可以直接通过css设置img标签的border属性来设置图片的边框。border是一个简写属性，可以在一个声明设置所有的边框属性。通过css设置img标签的border属性来设置图片的边框：HTML中文网img {border:5px solid red;}设置图片边框效果图：border 简写属性在一个声明设置所有的边框属性。可以按顺序设置如下属性：border-wid...
使用css3绘制出各种几何图形
html基础教程
02-25 2682
1、圆形 示例:　　　　　　　　　 思路：给任何正方形元素设置一个足够大的 border-radius ，就可以把它变成一个圆形.代码如下： html: 复制代码 代码如下: <div class="size example1"></div> css: 复制代码 代码如下: .size{ width:200px; height: 200p...
HTML 图像
歪脖先生的博客
04-11 377
图像可以在网页中放置各种各样的图像，当访问者浏览网页时，浏览器会自动加载图像。不过，加载的时间跟访问者的网络速度、图像尺寸、页面中的图像个数等相关。HTML中，通过 img 元素向网页嵌入一幅图像。img 元素是一个空元素，需要加“/”来正确关闭。在 img元素中，通过 src 属性来指定图像的URL，可以是绝对URL，也可以是相对URL。事实上，img 元素并不会将图像本身插入到网页中，而是创建...
谷歌图形化HTML5网页编辑器Google Web Designer
LisenYang的专栏
01-18 2万+
谷歌图形化HTML5网页编辑器Google Web Designer
html图形组合代码,基于HTML5的绘图——图形组合与阴影
weixin_35572363的博客
06-04 399
组合多个图形组合多个图形是指可以将图形重叠绘制在另一个图形上面，但图形中能够被看到的部分完全取决于以哪种方式进行组合，在HTML5中直接修改上下文对象globalCompositeOperation属性值即可。它使用的语法如下所示：context.globalCompositeOperation=type;以推行组合的方式有多种，直接将值指定到上述语法中的type位置即可。type的属性值有多个，...
JS代码收藏大全
weixin_30337251的博客
12-31 4130
JS代码收藏大全 从其他地方找来的，希望对有需要的人带来方便！ 1. oncontextmenu="window.event.returnvalue=false" 将彻底屏蔽鼠标右键<table border oncontextmenu=return(false)><td>no</table> 可用于Table 2...
用 css 做web图形化处理
weixin_33859231的博客
10-11 295
图片来自 CHRIS COYIER 在前端开发中，你或多或少都会接触到css图形。之前我整理过 伪元素&伪类 的内容，为的就是更加熟悉了解它们，以便更好的使用它们。同时也也使用它一做了一些动画。 css3-animate。 这里说的用css做图形，其实是使用一个html元素，结合它的伪元素 ::before & ::afte...
用Pytest+Allure生成漂亮的HTML图形化测试报告
热门推荐
刘春明的博客
03-20 6万+
对于软件测试来说，测试报告是非常重要的工作产出。一个漂亮、清晰、格式规范的测试报告，能够减少开发人员和测试人员的沟通成本。 本篇文章将介绍如何使用开源的测试报告生成框架Allure生成规范、格式统一、美观的测试报告。 通过这篇文章的介绍，你将能够： - 将Allure与Pytest测试框架相结合； - 执行测试之后，生成Allure格式的测试报告。 1、Allure测...
java html生成图片
05-11
而HTML则需要结合一些其他技术来实现图片的生成，在HTML中可以使用canvas来实现自己的图片，通过JavaScript可以让用户输入各种参数从而生成各式各样的图片。可以说，Java在生成图片方面拥有更丰富的功能和更大的自由...

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值