HTML5----各种图形形状应用

最新推荐文章于 2022-05-07 20:09:08 发布
最新推荐文章于 2022-05-07 20:09:08 发布
阅读量401 收藏 2
点赞数
文章标签： html
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_45581246/article/details/105079423
版权

border-radius属性
基本语法：
border-radius：1-4 length %/1-4 length (lenth为圆角半径长度）

应用1：

<html>
<head>
<style>
#{
padding:0;
margin:0;
}
#one{
width:400px;
height:400px;
background:rgb(0,100,255,0.5);
border-radius:50%;
float:left;
position:fixed;
}
#two{
float:left;
width:100px;
height:100px;
background:white;
border-radius:50px;
position:fixed;
left:150px;
top:150px;
}
</style>
</head>
<body>
<div id="one"></div>
<span id="two"</span>
</body>
</html>

效果图如下：
在这里插入图片描述

四格三角形应用：

<html>
<head>
<title>document</title>
<style>
div{
width:0;
width:0;
border-top:100px solid red;
border-bottom:100px solid yellow;
border-left:100px solid blue;
border-right:100px solid green
}
</style>
</head>
<body>
<div>
</div>
</body>
</html>

效果图如下：
在这里插入图片描述

八格三角形应用1：

<html>
<head>
<title>document</title>
<style type="text/css">
       #one{
       	width: 0;
                height:0;
       	border-top:100px solid #92D050; 
        border-bottom: 100px solid #FFFF00;
       	border-left: 100px solid #92D050;
       	border-right: 100px solid #FFFF00;
       }
       #two{
        width: 0px;
        height:0;
        left: 200px;
        top: -400px;
        border-top:100px solid #FF0000; 
        border-left: 100px solid #0070C0;
        border-right: 100px solid #FF0000;
        border-bottom:100px solid #0070C0;
        position: relative;
       }
       #three{
        width: 0px;
        height:0;
        border-top:100px solid black; 
        border-left: 100px solid #7030A0;
        border-right: 100px solid black;
        border-bottom: 100px solid #7030A0;
       }
       #four{
        width: 0px;
        height:0;
        left: 200px;
        top: -400px;
        border-top:100px solid white; 
        border-left: 100px solid white;
        border-right: 100px solid #00B0F0;
        border-bottom: 100px solid #00B0F0;
        position: relative;
      
       }
    </style>
</head>
<body>
      <div>
     <div id="one"></div>
     <div id="three"></div>
     <div id="two"></div>
     <div id="four"></div>
      </div>
</body>
</html>

效果图如下：
在这里插入图片描述

八格三角形应用2：

<html>
<head>
    <style type="text/css">
       #one{
        width: 0;
        border-top:100px solid #FF0000; 
        border-bottom: 100px solid #70AD47;
        border-left: 100px solid #70AD47;
        border-right: 100px solid #FF0000;
       }
       #two{
        width: 0px;
        left: 200px;
        top: -400px;
        position: relative;
        border-top:100px solid #44546A; 
        border-left: 100px solid #44546A;
        border-right: 100px solid #FFFF00;
        border-bottom: 100px solid #FFFF00;
       }
       #three{
        width: 0px;
        border-top:100px solid #7030A0; 
        border-left: 100px solid #7030A0;
        border-right: 100px solid #002060;
        border-bottom: 100px solid #002060;
       }
       #four{
        width: 0px;
        left: 200px;
        top: -400px;
        position: relative;
        border-top:100px solid #FFC000; 
        border-left: 100px solid #00B0F0;
        border-right: 100px solid #FFC000;
        border-bottom: 100px solid #00B0F0;
       }
    </style>
</head>
<body>
     <div id="one"></div>
     <div id="three"></div>
     <div id="two"></div>
     <div id="four"></div>
</body>
</html>

效果图如下：
在这里插入图片描述

爱心应用：

<html>
<head>
   <style type="text/css">
       #a{
   	background-color: red;
   	height:100px;
   	width: 100px;
   	transform: rotate(45deg);
   	}
    #a:before{
        height: 100px;
        width: 100px;
        left:-45px;
        top:-0px;
        position: absolute;
        display: block;
        border-radius: 80px;
        background-color: red;
        content: " ";
      }
      #a:after{
        height: 100px;
        width: 100px;
        left:0px;
        top:-45px;
        display: block;
        position: absolute;
        border-radius: 80px;
        background-color: red;
        content: " ";
      }
      div{
        position: absolute;
        left: 350px;
        top:99px;
       }
    </style>
   </head>
<body>
        <div id="a"></div>
</body>

效果图如下：
在这里插入图片描述
五角星应用：

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

效果图如下：
在这里插入图片描述
正方形应用：

了不起的盖茨茨
关注
  • 0
    点赞
  • 踩
  • 2
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
html图片形状,用CSS代码写出的各种形状图形的方法
weixin_34698515的博客
06-07 1343
一共收集整理了图形20个，比较实用，同时也为了熟悉CSS的代码。整合了一下，有错误欢迎指出。1.正方形#square {width: 100px;height: 100px;background: red;}2.长方形#rectangle {width: 200px;height: 100px;background: red;}3.左上三角#triangle-topleft {width: 0;h...
html+css实现各种图形
weixin_68548138的博客
05-08 223
1.带边框正方形 <head> <style> *{margin:10px;} #zhengFangXing{ border:5px solid blue; width:150px; height:150px; background-color:red; float:left; } &lt...
h5 canvas画图形
m0_37948979的博客
04-11 291
一、画线条 ctx.beginPath(); ctx.moveTo(startX,startY); for(var i = 1; i <= num; i++) { var newX = x0 + r * Math.cos(2*Math.PI*i/num); var newY = y0 + r * Math.sin(2*Math.PI*i/num); ctx.lin...
【html5/css3】CSS实现各种图形(常用图形)
Umbrella_Um的博客
05-19 902
1.正方形 { width: 200px; height: 100px; background: red; } 2.长方形 { width: 200px; height: 100px; background: red; } 3.圆 { width:100px; height:100px; background:red; border-radius:50%; /* 水平、垂直半径为宽高的50% */ } 4.椭圆 { .
h5图形化工具
长风的博客
09-03 395
1。易启秀 易启秀-免费H5页面创建工具-微信H5页面、微信朋友圈会议邀请函、电子贺卡、动态音乐专辑、电子微型杂志、节日贺卡等。易启秀可以很容易地展示大量的H5微场景模板，并且只需点击一下就可以很容易地创建H5页面。 2。兔子秀 兔子秀专注于H5技术，是微信H5页面、微场景、模板、短片、微信邀请函和场景应用的智能专业制作平台。它允许你创建像PPT一样的酷手机显示器。 3。木结 木结官方版是一款专业、可靠、功能强大且简单的h5制作工具。为您的应用、微信公众号码和网站提供简单、强大的内容制作、发布和统计服务。
HTML5-粒子图形变形动画特效.zip
07-11
"HTML5-粒子图形变形动画特效.zip"这个压缩包中包含的资源，显然是为了展示如何利用HTML5的Canvas API来创建粒子图形变形动画。Canvas是HTML5的一个核心特性，允许开发者在网页上进行动态图形绘制，从而实现丰富的...
商业编程-源码-一个支持各种交叉等形状工业控制管道控件.zip
06-24
本资源“商业编程-源码-一个支持各种交叉等形状工业控制管道控件.zip”提供了一组专门设计用于工业控制场景的管道图形控件，这些控件能够展示管道网络的各种复杂形状，包括交叉、拐角、分支等，从而帮助开发者构建...
商业编程-源码-图形、文字和矢量.zip
06-23
- **2D图形绘制**：包括线条、形状、图像的绘制，可能用到的算法有Bresenham算法、贝塞尔曲线等。 - **3D图形**：涉及到三维模型、光照、纹理映射等，可能涉及到OpenGL或Direct3D的高级特性。 2. **文字处理**： ...
html5-命悬一线-网页小游戏.rar
07-10
《命悬一线》是一款基于HTML5技术开发的网页小游戏，主要利用了HTML5中的Canvas元素进行图形绘制和交互。HTML5是下一代超文本标记语言，它增强了网页的多媒体能力和交互性，而Canvas作为HTML5的一个重要组成部分，...
nim-canvas：Nim HTML5 Canvas模块
02-02
Nim-canvas 提供了一系列的nim语言绑定，这些绑定对应于HTML5 Canvas的原生方法，如`fillRect`、`strokeRect`、`beginPath`、`arc`、`lineTo`等，允许开发者绘制矩形、圆形、线条、路径和其他复杂形状。同时，这个库...
ShapeTouch该Javascript库用于实现H5中不规则图形按钮可点击区域的判断
08-12
ShapeTouch 该Javascript库用于实现H5中不规则图形按钮可点击区域的判断
H5之 Canvas图形实现
张晨光老师的播客
11-09 2287
测试浏览器                            //根据id，来得到网页上的画布元素对象            var c=document.getElementById("mycanvas");            var ctx=c.getContext("2d");//2d内容            //1.预备;            ctx.beginPath(); 
HTML5 Canvas 教程：五、形状
gunnery的专栏
10-18 271
五、形状 Shapes   5.1自定义形状 Custom Shape   若要用HTML5画布绘制自定义形状，可以创建一个路径，然后调用closePath()方法关闭它。可以使用lineTo()、arcTo()、quadraticCurveTo()或bezierCurveTo()方法来构造构形状的每个子路径。   &lt;!DOCTYPE HTML&gt; &lt;html&gt;...
HTML常用图表（柱状图，折线图，饼图，关联图，表格）的绘制
热门推荐
数据挖掘+大数据研发+算法学习
05-07 1万+
一：柱状图/折线图的绘制 <!DOCTYPE html> <head> <meta charset="utf-8"> <title>ECharts</title> </head> <body> <!-- 为ECharts准备一个具备大小（宽高）的Dom --> <div id="main" style="width:80%;height:400px;margin: 0 a
HTML Web图形样式基础1
weixin_40838774的博客
11-28 667
1.Web图片分类： GIF图片（可交换图形文件格式）：最适合包含纯色和简单几何形状的图片，比如剪贴画。GIF文件最大颜色数为256色，其扩展名为.gif。GIF保存时采用无损压缩。也就是说在浏览器渲染时，图片将包含与原始图片一样多的像素，不会丢失任何细节。GIF图片包含多张图片（或称为帧），这些帧在屏幕上闪烁时，图片显示就会动起来。GIF图片使用的GIF89A格式支持透明功能。 JPEG图片
html画特殊图形（待修改）
dairenwu的博客
09-22 839
1.画圆<!doctype html> <html> <head> <style> .box{width:100px;height:100px;border-radius:50%;} </style> </head> <body> <div class="box"></div> </body> </html>2.画梯形<!doc
HTML5画布拖放多个形状
limeiyans喜欢编程的那些事
01-16 849
说明:拖拽的形状通过双击或双攻丝或删除它们。 body { margin: 0px; padding: 0px; } canvas { border: 1px solid #9C9898; } window.onload = functio
html前端之css绘制形状
菲宇运维
07-29 885
今天在国外的网站上看到了很多看似简单却又非常强大的纯CSS绘制的图形，里面有最简单的矩形、圆形和三角形，也有各种常见的多边形，甚至是阴阳太极和网站小图标，真的非常强大，分享给大家。 Square(正方形) #square { width: 100px; height: 100px; background: red; } Rectangle(矩形) #rectangle { width: 200px; height: 100px; backg
自定义图片形状
小虎博客
12-18 1237
/**  * Created by Coder.Yan on 2015/5/21.  */ @SuppressWarnings("deprecation") public class XORView extends View {     Paint paint;     Path path;     BitmapShader brush;     public XORView(Co
HTML5图形扭曲原理与应用实例解析
在HTML5高级编程中，图形扭曲和变形是一项重要的功能，它扩展了网页和应用程序的视觉表现力。本文档主要介绍了HTML5中用于图形处理的几种核心变形技术，包括： 1. **缩放**：`scale()`方法允许你改变图像的大小，如...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值