CSS3绘制各种几何图形练习

最新推荐文章于 2022-02-23 16:04:04 发布
最新推荐文章于 2022-02-23 16:04:04 发布
阅读量939 收藏 3
点赞数
分类专栏： Html5 文章标签： html5 css3

学习用CSS3绘制各种图形。


截图：

                       

                


代码：

<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8">
<title>CSS3绘制各种几何图形练习</title>
<style type="text/css">
/*圆形*/
#circle {
width: 120px;
height: 120px;
background: #7fee1d;
-moz-border-radius: 60px;
-webkit-border-radius: 60px;
border-radius: 60px;
}
/*椭圆形*/
#oval {
width: 200px;
height: 100px;
background: #e9337c;
-webkit-border-radius: 100px / 50px;
-moz-border-radius: 100px / 50px;
border-radius: 100px / 50px;
}
/*正三角性*/
#triangle {
width: 0;
height: 0;
border-bottom: 140px solid #fcf921;
border-left: 70px solid transparent;
border-right: 70px solid transparent;
}
/*制作菱形的方法有很多种。这里使用的是transform属性和rotate相结合，使两个正反三角形上下显示。*/
#diamond {
width: 120px;
height: 120px;
background: #1eff00;
/* Rotate transform 旋转角度*/
    -webkit-transform: rotate(-45deg);
-moz-transform: rotate(-45deg);
-ms-transform: rotate(-45deg);
-o-transform: rotate(-45deg);
transform: rotate(-45deg);
/* Rotate Origin transform-origin 设置旋转元素的基点或者中心点位置：注释：该属性必须与 transform 属性一同使用。默认值  X 轴：50%  Y 轴：50% Z 轴：0 ；即盒子中心*/
    -webkit-transform-origin: 0 100%;
-moz-transform-origin: 0 100%;
-ms-transform-origin: 0 100%;
-o-transform-origin: 0 100%;
transform-origin: 0 100%;
margin-top: 60px;
margin-right: 0;
margin-bottom: 10px;
margin-left: 110px;
}
/*梯形*/
#trapezium {
height: 0;
width: 120px;
border-bottom: 120px solid #ec3504;
border-left: 60px solid transparent;
border-right: 60px solid transparent;
}
/*平行四边形 绕X轴倾斜*/
#parallelogram {
width: 160px;
height: 100px;
background: #8734f7;
-webkit-transform: skew(30deg, 0deg);
-moz-transform: skew(30deg);
-o-transform: skew(30deg);
transform: skew(30deg);
/*skew()方法，该元素会根据横向（X轴）和垂直（Y轴）线参数给定角度;如：skew(30deg,20deg)是绕X轴和Y轴周围20度30度的元素。*/
margin-left: 50px;
}
/*平行四边形 绕Y轴倾斜*/
#parallelogram2 {
width: 160px;
height: 100px;
background: #8734f7;
-webkit-transform: skew(0deg, 20deg);
-moz-transform: skew(0deg, 20deg);
-o-transform: skew(0deg, 20deg);
transform: skew(0deg, 20deg);
margin-left: 50px;
}
/*平行四边形 绕X和Y轴倾斜*/
#parallelogram3 {
width: 160px;
height: 100px;
background: #8734f7;
-webkit-transform: skew(40deg, 20deg);
-moz-transform: skew(40deg, 20deg);
-o-transform: skew(40deg, 20deg);
transform: skew(40deg, 20deg);
margin-left: 50px;
}
/*五角星形，3个三角形拼接而成，颜色一致即可*/
#star {
width: 0;
height: 0;
margin: 50px 0;
position: relative;
display: block;
border-right: 100px solid transparent;
border-bottom: 70px solid #8734f7;
border-left: 100px solid transparent;
-moz-transform: rotate(35deg);
-webkit-transform: rotate(35deg);
-o-transform: rotate(35deg);
transform: rotate(35deg);
}
#star:before {
height: 0;
width: 0;
position: absolute;
display: block;
top: -45px;
left: -65px;
border-bottom: 80px solid #ec3504;
border-left: 30px solid transparent;
border-right: 30px solid transparent;
content: '';
-webkit-transform: rotate(-35deg);
-moz-transform: rotate(-35deg);
-o-transform: rotate(-35deg);
transform: rotate(-35deg);
}
#star:after {
content: '';
width: 0;
height: 0;
position: absolute;
display: block;
top: 3px;
left: -105px;
border-right: 100px solid transparent;
border-bottom: 70px solid #fc4e8a;
border-left: 100px solid transparent;
-webkit-transform: rotate(-70deg);
-moz-transform: rotate(-70deg);
-o-transform: rotate(-70deg);
transform: rotate(-70deg);
}
/*六角星 2个互相倒置的等边三角形组合*/
#star_six_points {
    width: 0;
    height: 0;
    display: block;
    position: absolute;
    border-left: 50px solid transparent;
    border-right: 50px solid transparent;
    border-bottom: 100px solid #fc4e8a;
    margin: 10px auto;
}
  
#star_six_points:after {
    content: "";
    width: 0;
    height: 0;
    position: absolute;
    border-left: 50px solid transparent;
    border-right: 50px solid transparent;
    border-top: 100px solid #de34f7;
    margin: 30px 0 0 -50px;
}    


/*六边形：1个长方形和上下2个等边三角形组合*/
#hexagon {
    width: 100px;
    height: 55px;
    background: #de34f7;
    position: relative;
    margin: 10px auto;
}
  
#hexagon:before {
    content: "";
    width: 0;
    height: 0;
    position: absolute;
    top: -25px;
    left: 0;
    border-left: 50px solid transparent;
    border-right: 50px solid transparent;
    border-bottom: 25px solid #fc5e5e;
}
  
#hexagon:after {
    content: "";
    width: 0;
    height: 0;
    position: absolute;
    bottom: -25px;
    left: 0;
    border-left: 50px solid transparent;
    border-right: 50px solid transparent;
    border-top: 25px solid #fc5e5e;
}     


/*心形,2个长方形半圆角组合 */
#heart {
position: relative;
top: 20px;
left: 20px;
background-color: #CCC;    
width: 140px;
    height: 140px;
}
  
#heart:before,#heart:after {
    content: "";
    width: 70px;
    height: 115px;
    position: absolute;
    background: red;
    left: 70px;
    top: 0;
    -webkit-border-radius: 50px 50px 0 0;
    -moz-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%;
}
  
#heart: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%;
background-color: #0FF;
}  


/*蛋形：椭圆形的一个变体，它的高度要比宽度稍大，并且设置正确的border-radius属性即可以制作出一个蛋形*/
#egg {
    width: 136px;
    height: 190px;
    background: #ffc000;
    display: block;
    -webkit-border-radius: 63px 63px 63px 63px / 108px 108px 72px 72px;
    border-radius: 50% 50% 50% 50% / 60% 60% 40% 40%;
}  


/*无穷符号:可以通过border属性和设置伪元素的角度组合来实现。*/
#infinity {
    width: 220px;
    height: 100px;
    position: relative;
}
  
#infinity:before,#infinity:after {
    content: "";
    width: 60px;
    height: 60px;
    position: absolute;
    top: 0;
    left: 0;
    border: 20px solid #06c999;
    -moz-border-radius: 50px 50px 0;
    border-radius: 50px 50px 0 50px;
    -webkit-transform: rotate(-45deg);
    -moz-transform: rotate(-45deg);
    -ms-transform: rotate(-45deg);
    -o-transform: rotate(-45deg);
    transform: rotate(-45deg);
}
  
#infinity:after {
    left: auto;
    right: 0;
    -moz-border-radius: 50px 50px 50px 0;
    border-radius: 50px 50px 50px 0;
    -webkit-transform: rotate(45deg);
    -moz-transform: rotate(45deg);
    -ms-transform: rotate(45deg);
    -o-transform: rotate(45deg);
    transform: rotate(45deg);
border: 20px solid red;
}      


/*消息提示框:可以先制作一个圆角矩形，然后在需要的地方放置一个三角形。*/
#comment_bubble {
width: 180px;
height: 100px;
background: #088cb7;
position: relative;
-moz-border-radius: 12px;
-webkit-border-radius: 12px;
border-radius: 12px;
left: 10px;
}
  
#comment_bubble:after {
    content: "";
    width: 0;
    height: 0;
    left: 100%;
    right: 0;
    top: 38px;
    position: absolute;
    border-top: 13px solid transparent;
    border-left: 26px solid red;
    border-bottom: 13px solid transparent;
} 


/*回复消息提示框:可以先制作一个圆角矩形，然后在需要的地方放置一个三角形。*/
#comment_bubble2 {
width: 180px;
height: 100px;
background: #088cb7;
position: relative;
-moz-border-radius: 12px;
-webkit-border-radius: 12px;
border-radius: 12px;
left: 250px;
}
  
#comment_bubble2:before {
    content: "";
    width: 0;
    height: 0;
    right: 100%;
    top: 38px;
    position: absolute;
    border-top: 13px solid transparent;
    border-right: 26px solid red;
    border-bottom: 13px solid transparent;
}                                        
</style>
</head>


<body>
<!--圆形-->
<div id="circle"></div>
<br>
<!--椭圆形-->
<div id="oval"></div>
<br>
<!--正三角形-->
<div id="triangle"></div>
<br>
<br>
<!--菱形-->
<div id="diamond"></div>
<br>
<!--梯形-->
<div id="trapezium"></div>
<br>
<!--平行四边形-->
<div id="parallelogram"></div>
<br>
<br>
<!--平行四边形2-->
<div id="parallelogram2"></div>
<br>
<br>
<br>
<!--平行四边形3-->
<div id="parallelogram3"></div>
<br>
<!--五角星形-->
<div id="star"></div>
<br>
<!--六角形-->
<div id="star_six_points"></div>
<br><br>
<!--六边形-->
<div id="hexagon"></div>
<br><br>
<!--心形-->
<div id="heart"></div>
<br><br>
<!--蛋形-->
<div id="egg"></div>
<br><br>
<!--无穷符号-->
<div id="infinity"></div>
<br><br><br><br>
<!--消息提示框-->
<div id="comment_bubble"></div>
<br><br>
<!--消息提示框 回复-->
<div id="comment_bubble2"></div>
<br>
</body>
</html>


PandaCode辉
关注
  • 0
    点赞
  • 踩
  • 3
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
CSS中的各种形状
Mosum的博客
11-26 1135
CSS中的各种形状
css实现各种形状样式
ICode联盟
08-22 75
css实现各种几何图形样式，正方形、三角形、圆形等。
css 形状_CSS形状简介
culiao9310的博客
09-29 436
Until the introduction of CSS Shapes, it was nearly impossible to design a magazine-esque layout with free flowing text for the web. On the contrary, web design layouts have traditionally...
用css绘制图形,纯 CSS 绘制各种基本图形
weixin_33754535的博客
08-03 1188
最近被问到如何用CSS绘制一个圆，解决这个问题的同时引发了我对CSS绘制图形的兴趣。今天汇总一下CSS绘制的各种基本图形。1.正方形正方形是最简单的图形了，只需要宽高一致就可以绘制出来。// css.square{width: 100px;height: 100px;border: 1px solid black;}//html正方形2.圆形圆形主要用到了border-radius属性。该属性可以...
css绘制常见的一些图形(线条、箭头、三角形、矩形、圆、椭圆、平行四边形、菱形、梯形)
qq_41971356的博客
06-29 2万+
最近写的内容需要绘制一些图形，在此做下记录（用的uniapp写的，请自动对view标签进行转换） <view></view> //等同于<div></div> <text></text> // 等同于 span类的，用于存放文本 线段的绘制 线段有直线以及虚线 直线 先说说直线的绘制，这个是非常简单的 <view class='line'> </view> 虚线 箭头的绘制 ...
纯CSS3实现iOS7扁平化图标特效代码
03-20
2. 学习SVG的基本概念和如何结合CSS3来绘制图形。 3. 阅读并分析提供的代码样例，理解如何构建和应用CSS3规则。 4. 练习创建自己的扁平化图标，尝试不同的颜色、形状和动画效果。 通过实践和不断尝试，你将能够熟练...
自己练习写的three 3D demo
05-12
通常会使用`WebGLRenderer`，它利用WebGL API在浏览器中绘制3D图形。为了使3D物体动起来，开发者可以使用`requestAnimationFrame`来实现动画循环，更新物体的位置、旋转或缩放。 6. **交互性**：three.js也支持与...
041-pencil_css_
10-01
总结来说，"041-pencil_css_" 的主题是使用 CSS 来创建一个逼真的铅笔图形，涉及的 CSS 知识点包括几何形状创建、定位、颜色处理、阴影效果以及细节渲染。这样的练习可以帮助开发者提升 CSS 技能，理解如何用 CSS ...
html5 canvas实现酷炫的网状几何图形变换动画特效源码.zip
最新发布
11-03
这个压缩包"html5 canvas实现酷炫的网状几何图形变换动画特效源码.zip"显然是一个包含源代码的资源，旨在展示如何使用HTML5 Canvas API来创建复杂的几何图形变换动画效果。 Canvas API是HTML5的一个重要特性，它...
鼠标跟随线条_练习_feedhfx_termmza_
10-03
总的来说，这个练习涵盖了前端开发中的基本技能，包括HTML布局、CSS样式设计和JavaScript交互实现，同时也涉及到了图形绘制和性能优化的进阶知识。通过这个练习，开发者可以提升对用户界面动态效果的理解和实现能力...
css3绘制常见的30种形状（心形,五角星,六边形,钻石,对话框,阴阳鱼图等）
boy火巨的博客
03-12 3230
CSS实现圆角，三角，五角星，五边形，爱心，12角星，8角星，圆，椭圆，圆圈，八卦等等 新出的html5新增了不少标签，性能更强，原来的很繁琐的功能几个标签就能实现，同时CSS3也推出，更是一大亮点，下面是css3的部分用法，在此总结一下，以供需要的朋友们，总共30个例子 长方形 #Rectangle{ width: 200px; height: 50px; ...
用CSS绘制最常见的40种形状和基本图形
細水、長流√的专栏
02-23 963
今天在国外的网站上看到了很多看似简单却又非常强大的纯CSS绘制的图形，里面有最简单的矩形、圆形和三角形，也有各种常见的多边形，甚至是阴阳太极和网站小图标，真的非常强大，分享给大家。 Square(正方形) #square { width: 100px; height: 100px; background: red; } Rectangle(矩形) #rectangle { width: 200px; height: 100px; bac
CSS绘制常见的几何图形
CRPER
02-02 4454
题外话在写网页的过程,必不可免的会碰到网站需要装饰一些几何图形; 实现的方式无非四种: 1. 图片 2. CSS2.1&3 3. SVG 4. Canvas就我个人而言,对于一些常见的几何图形. - 图片是不推荐的[太占资源,也不利于维护] - CSS是比较推荐的,精简且方便维护 - SVG也是一个很好的选择[学习成本高一点点] - Canvas看
使用css3绘制出各种几何图形
html基础教程
02-25 2682
1、圆形 示例:　　　　　　　　　 思路：给任何正方形元素设置一个足够大的 border-radius ，就可以把它变成一个圆形.代码如下： html: 复制代码 代码如下: <div class="size example1"></div> css: 复制代码 代码如下: .size{ width:200px; height: 200p...
CSS3绘制各类图形
miniminixu的博客
08-28 909
一、圆形最常用，设置宽=高，border-radius为宽或高的一半即可。.circle{ width:100px; height:100px; border-radius:50%;//或者50px background-color:#000; }二、椭圆宽≠高（相等则为圆形了）border-radius的水平半径为宽的50%，垂直半径为高的50%。.oval{
css3制作正方体
chenxi1025的博客
07-26 1297
今天学习transform的时候突然奇想，想写一个正方体，然后我就跟着我的想法，写咯一个，该正方体是全部用的html5+css3实现的，只要用transform 里面的rotate（旋转）、translate（位移）等，多的就不说咯，具体的看代码， html代码如下： 1 2 3 4 5
css3完成多边形
05-26 240
1、正方形 最终效果： CSS代码如下： #square {width: 100px;height: 100px;background: red;} ...
css3样式绘制各种图形，很厉害
二手农民的学习博客
12-21 1246
https://css-tricks.com/examples/ShapesOfCSS/
css3 实现元素 弧线运动
热门推荐
WangYangsea的博客
06-06 2万+
如何使用CSS控制元素弧线运动 我们都知道，CSS3的新属性transfrom过渡效果可以实现元素位移、旋转、缩放。结合animation属性，就可以实现元素的动画效果。但是如何通过css实现元素实现弧线运动呢： 如上图动画效果所示，圆球弧线运动，分析运动： 将小球的运动拆分成X轴和Y轴两个运动来看，此时X轴的小球是以 （慢—快） 这样的速度运动； 而Y轴的方向小球是以（快—慢）这样的...
CSS3绘制百度小度熊教程
在Web开发中，CSS3（层叠样式表第三版）提供了丰富的图形绘制能力，允许开发者通过纯CSS创建复杂的图形和动画。本文将详细讲解如何使用CSS3来绘制百度的小度熊。首先，我们需要了解CSS3的一些基本概念和技术，包括...

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

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

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值