【CSS】css3绘制各种形状图形三角形，菱形，五角星，椭圆等
2024-04-09 16:25:48
1.制作圆形：
要使用CSS来制作一个圆形，我们需要一个div，被给它设置一个ID
<div id="ang"></div>
圆形在设置CSS时要设置宽度和高度相等，然后设置border-radius属性为宽度或高度的一半即可：
#ang{width: 120px;height: 120px;background: #f6f7f8;-moz-border-radius: 60px;-webkit-border-radius: 60px;border-radius: 60px;}2.制作椭圆形：
椭圆形是正圆形的一个变体，同样使用一个带ID的div来制作
<div id="ang"></div>
设置椭圆形的CSS时，高度要设置为宽度的一半，border-radius属性也要做相应的改变：
#ang {width: 200px;height: 100px;background: #000;-webkit-border-radius: 100px / 50px;-moz-border-radius: 100px / 50px;border-radius: 100px / 50px;} 3.制作左三角形：
左三角形操作的是border-top、border-left和border-right三条边的属性，其中上边和下边要设置透明属性。
#ang{width: 0;height: 0;border-top: 70px solid transparent;border-right: 140px solid #6bbf20;border-bottom: 70px solid transparent;} 4.制作倒三角形：
与正三角形不同的是，倒三角形要设置的是border-top、border-left和border-right三条边的属性：
#ang {width: 0;height: 0;border-top: 140px solid red;border-left: 70px solid transparent;border-right: 70px solid transparent;} 5.制作菱形
制作菱形的方法有很多种。这里使用的是transform属性和rotate相结合，使两个正反三角形上下显示。
#ang{width: 120px;height: 120px;background: #1eff00;/* Rotate */-webkit-transform: rotate(-45deg);-moz-transform: rotate(-45deg);-ms-transform: rotate(-45deg);-o-transform: rotate(-45deg);transform: rotate(-45deg);/* Rotate Origin */-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: 60px 0 10px 310px;} 
转存失败重新上传取消
6.制作梯形：
梯形是三角形的一个变体，设置CSS梯形时，左右两条边设置为相等，并且给它设置一个宽度。
#ang{height: 0;width: 120px;border-bottom: 120px solid #ec3504;border-left: 60px solid transparent;border-right: 60px solid transparent;} 转存失败重新上传取消
7.制作三角形：
要创建一个CSS三角形，需要使用border，通过设置不同边的透明效果，我们可以制作出三角形的现状。另外，在制作三角形时，宽度和高度要设置为0。
<div id="ang"></div>
#ang {width: 0;height: 0;border-bottom: 140px solid #999;border-left: 70px solid transparent;border-right: 70px solid transparent;} 转存失败重新上传取消
8.制作平行四边形：
平行四边形的制作方式是使用transform属性使长方形倾斜一个角度。
#ang{width: 160px;height: 100px;background: #fff;-webkit-transform: skew(30deg);-moz-transform: skew(30deg);-o-transform: skew(30deg);transform: skew(30deg);} 转存失败重新上传取消
9.六角星形：
和五角星的制作方法不同，六角星形状的制作方法是操纵border属性来制作两半图形，然后合并它们。
#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 #de34f7;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;}转存失败重新上传取消
10.六边形：
六边形的制作方法可以有很多种，可以像五边形一样，先制作一个长方形，然后在它的上面和下面各放置一个三角形。
#hexagon {width: 100px;height: 55px;background: #fc5e5e;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;} 转存失败重新上传取消
11.五星形：
星形的HTML结构同样使用一个带ID的空div。星形的实现方式比较复杂，主要是使用transform属性来旋转不同的边。仔细体会下面的代码。
#star {width: 0;height: 0;margin: 50px 0;color: #fc2e5a;position: relative;display: block;border-right: 100px solid transparent;border-bottom: 70px solid #fc2e5a;border-left: 100px solid transparent;-moz-transform: rotate(35deg);-webkit-transform: rotate(35deg);-ms-transform: rotate(35deg);-o-transform: rotate(35deg);}#star:before {height: 0;width: 0;position: absolute;display: block;top: -45px;left: -65px;border-bottom: 80px solid #fc2e5a;border-left: 30px solid transparent;border-right: 30px solid transparent;content: '';-webkit-transform: rotate(-35deg);-moz-transform: rotate(-35deg);-ms-transform: rotate(-35deg);-o-transform: rotate(-35deg);}#star:after {content: '';width: 0;height: 0;position: absolute;display: block;top: 3px;left: -105px;color: #fc2e5a;border-right: 100px solid transparent;border-bottom: 70px solid #fc2e5a;border-left: 100px solid transparent;-webkit-transform: rotate(-70deg);-moz-transform: rotate(-70deg);-ms-transform: rotate(-70deg);-o-transform: rotate(-70deg);}转存失败重新上传取消
12.蛋形：
蛋形时椭圆形的一个变体，它的高度要比宽度稍大，并且设置正确的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%;}转存失败重新上传取消
13.无穷符号：
无穷符号可以通过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);}转存失败重新上传取消
14.消息提示框：
消息提示框可以先制作一个圆角矩形，然后在需要的地方放置一个三角形。
#comment_bubble {width: 140px;height: 100px;background: #088cb7;position: relative;-moz-border-radius: 12px;-webkit-border-radius: 12px;border-radius: 12px;}#comment_bubble:before {content: "";width: 0;height: 0;right: 100%;top: 38px;position: absolute;border-top: 13px solid transparent;border-right: 26px solid #088cb7;border-bottom: 13px solid transparent;}转存失败重新上传取消
15.方块
#square {width: 100px;height: 100px;background: red;
}16.左上角
#triangle-topleft {width: 0;height: 0;border-top: 100px solid red;border-right: 100px solid transparent;}17.右上角
#triangle-topright {width: 0;height: 0;border-top: 100px solid red;border-left: 100px solid transparent;}18.左下角
#triangle-bottomleft {width: 0;height: 0;border-bottom: 100px solid red;border-right: 100px solid transparent;}19.右下角
#triangle-bottomright {width: 0;height: 0;border-bottom: 100px solid red;border-left: 100px solid transparent;}20.弯曲的尾巴箭头
#curvedarrow {position: relative;width: 0;height: 0;border-top: 9px solid transparent;border-right: 9px solid red;transform: rotate(10deg);}#curvedarrow:after {content: "";position: absolute;border: 0 solid transparent;border-top: 3px solid red;border-radius: 20px 0 0 0;top: -12px;left: -9px;width: 12px;height: 12px;transform: rotate(45deg);}21.梯形
#trapezoid {border-bottom: 100px solid red;border-left: 25px solid transparent;border-right: 25px solid transparent;height: 0;width: 100px;}22.五边形
#pentagon {position: relative;width: 54px;box-sizing: content-box;border-width: 50px 18px 0;border-style: solid;border-color: red transparent;}#pentagon:before {content: "";position: absolute;height: 0;width: 0;top: -85px;left: -18px;border-width: 0 45px 35px;border-style: solid;border-color: transparent transparent red;}23.八边形
#octagon {width: 100px;height: 100px;background: red;position: relative;}#octagon:before {content: "";width: 100px;height: 0;position: absolute;top: 0;left: 0;border-bottom: 29px solid red;border-left: 29px solid #eee;border-right: 29px solid #eee;}#octagon:after {content: "";width: 100px;height: 0;position: absolute;bottom: 0;left: 0;border-top: 29px solid red;border-left: 29px solid #eee;border-right: 29px solid #eee;} 24.心形
#heart {position: relative;width: 100px;height: 90px;}#heart:before,#heart:after {position: absolute;content: "";left: 50px;top: 0;width: 50px;height: 80px;background: red;border-radius: 50px 50px 0 0;transform: rotate(-45deg);transform-origin: 0 100%;}#heart:after {left: 0;transform: rotate(45deg);transform-origin: 100% 100%;}25.半扇形角形
#diamond-shield {width: 0;height: 0;border: 50px solid transparent;border-bottom: 20px solid red;position: relative;top: -50px;}#diamond-shield:after {content: '';position: absolute;left: -50px;top: 20px;width: 0;height: 0;border: 50px solid transparent;border-top: 70px solid red;}26.正菱形
#diamond {width: 0;height: 0;border: 50px solid transparent;border-bottom-color: red;position: relative;top: -50px;}#diamond:after {content: '';position: absolute;left: -50px;top: 50px;width: 0;height: 0;border: 50px solid transparent;border-top-color: red;}27.砖石
#cut-diamond {border-style: solid;border-color: transparent transparent red transparent;border-width: 0 25px 25px 25px;height: 0;width: 50px;box-sizing: content-box;position: relative;margin: 20px 0 50px 0;}#cut-diamond:after {content: "";position: absolute;top: 25px;left: -25px;width: 0;height: 0;border-style: solid;border-color: red transparent transparent transparent;border-width: 70px 50px 0 50px;}28.咬一口
#pacman {width: 0px;height: 0px;border-right: 60px solid transparent;border-top: 60px solid red;border-left: 60px solid red;border-bottom: 60px solid red;border-top-left-radius: 60px;border-top-right-radius: 60px;border-bottom-left-radius: 60px;border-bottom-right-radius: 60px;}29.十二边角形
#burst-12 {background: red;width: 80px;height: 80px;position: relative;text-align: center;}#burst-12:before,#burst-12:after {content: "";position: absolute;top: 0;left: 0;height: 80px;width: 80px;background: red;}#burst-12:before {transform: rotate(30deg);}#burst-12:after {transform: rotate(60deg);}30.八边角形
#burst-8 {background: red;width: 80px;height: 80px;position: relative;text-align: center;transform: rotate(20deg);}#burst-8:before {content: "";position: absolute;top: 0;left: 0;height: 80px;width: 80px;background: red;transform: rotate(135deg);}31.阴阳交合--太极
#yin-yang {width: 96px;box-sizing: content-box;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;box-sizing: content-box;}#yin-yang:after {content: "";position: absolute;top: 50%;left: 50%;background: red;border: 18px solid #eee;border-radius: 100%;width: 12px;height: 12px;box-sizing: content-box;}32.勋章丝绸
#badge-ribbon {position: relative;background: red;height: 100px;width: 100px;border-radius: 50px;}#badge-ribbon:before,#badge-ribbon:after {content: '';position: absolute;border-bottom: 70px solid red;border-left: 40px solid transparent;border-right: 40px solid transparent;top: 70px;left: -10px;transform: rotate(-140deg);}#badge-ribbon:after {left: auto;right: -10px;transform: rotate(140deg);}33.丑八怪
#space-invader {box-shadow: 0 0 0 1em red,0 1em 0 1em red,-2.5em 1.5em 0 .5em red,2.5em 1.5em 0 .5em red,-3em -3em 0 0 red,3em -3em 0 0 red,-2em -2em 0 0 red,2em -2em 0 0 red,-3em -1em 0 0 red,-2em -1em 0 0 red,2em -1em 0 0 red,3em -1em 0 0 red,-4em 0 0 0 red,-3em 0 0 0 red,3em 0 0 0 red,4em 0 0 0 red,-5em 1em 0 0 red,-4em 1em 0 0 red,4em 1em 0 0 red,5em 1em 0 0 red,-5em 2em 0 0 red,5em 2em 0 0 red,-5em 3em 0 0 red,-3em 3em 0 0 red,3em 3em 0 0 red,5em 3em 0 0 red,-2em 4em 0 0 red,-1em 4em 0 0 red,1em 4em 0 0 red,2em 4em 0 0 red;background: red;width: 1em;height: 1em;overflow: hidden;margin: 50px 0 70px 65px;}34.电视屏幕
#tv {position: relative;width: 200px;height: 150px;margin: 20px 0;background: red;border-radius: 50% / 10%;color: white;text-align: center;text-indent: .1em;}#tv:before {content: '';position: absolute;top: 10%;bottom: 10%;right: -5%;left: -5%;background: inherit;border-radius: 5% / 50%;}35.雪弗龙
#chevron {position: relative;text-align: center;padding: 12px;margin-bottom: 6px;height: 60px;width: 200px;}#chevron:before {content: '';position: absolute;top: 0;left: 0;height: 100%;width: 51%;background: red;transform: skew(0deg, 6deg);}#chevron:after {content: '';position: absolute;top: 0;right: 0;height: 100%;width: 50%;background: red;transform: skew(0deg, -6deg);}36.放大镜
#magnifying-glass {font-size: 10em;display: inline-block;width: 0.4em;box-sizing: content-box;height: 0.4em;border: 0.1em solid red;position: relative;border-radius: 0.35em;}#magnifying-glass:before {content: "";display: inline-block;position: absolute;right: -0.25em;bottom: -0.1em;border-width: 0;background: red;width: 0.35em;height: 0.08em;transform: rotate(45deg);}37.faceBo图标
#facebook-icon {background: red;text-indent: -999em;width: 100px;height: 110px;box-sizing: content-box;border-radius: 5px;position: relative;overflow: hidden;border: 15px solid red;border-bottom: 0;}#facebook-icon:before {content: "/20";position: absolute;background: red;width: 40px;height: 90px;bottom: -30px;right: -37px;border: 20px solid #eee;border-radius: 25px;box-sizing: content-box;}#facebook-icon:after {content: "/20";position: absolute;width: 55px;top: 50px;height: 20px;background: #eee;right: 5px;box-sizing: content-box;}38.月亮
#moon {width: 80px;height: 80px;border-radius: 50%;box-shadow: 15px 15px 0 0 red;}39.佐伊鲁尼旗帜
#flag {width: 110px;height: 56px;box-sizing: content-box;padding-top: 15px;position: relative;background: red;color: white;font-size: 11px;letter-spacing: 0.2em;text-align: center;text-transform: uppercase;}#flag:after {content: "";position: absolute;left: 0;bottom: 0;width: 0;height: 0;border-bottom: 13px solid #eee;border-left: 55px solid transparent;border-right: 55px solid transparent;}40.奥米德苏拉利椎体
#cone {width: 0;height: 0;border-left: 70px solid transparent;border-right: 70px solid transparent;border-top: 100px solid red;border-radius: 50%;}41.红十字
#cross {background: red;height: 100px;position: relative;width: 20px;}#cross:after {background: red;content: "";height: 20px;left: -40px;position: absolute;top: 40px;width: 100px;}42.小红房
#base {background: red;display: inline-block;height: 55px;margin-left: 20px;margin-top: 55px;position: relative;width: 100px;}#base:before {border-bottom: 35px solid red;border-left: 50px solid transparent;border-right: 50px solid transparent;content: "";height: 0;left: 0;position: absolute;top: -35px;width: 0;}43.指标
#pointer {width: 200px;height: 40px;position: relative;background: red;}#pointer:after {content: "";position: absolute;left: 0;bottom: 0;width: 0;height: 0;border-left: 20px solid white;border-top: 20px solid transparent;border-bottom: 20px solid transparent;}#pointer:before {content: "";position: absolute;right: -20px;bottom: 0;width: 0;height: 0;border-left: 20px solid red;border-top: 20px solid transparent;border-bottom: 20px solid transparent;}44.锁
#lock {font-size: 8px;position: relative;width: 18em;height: 13em;border-radius: 2em;top: 10em;box-sizing: border-box;border: 3.5em solid red;border-right-width: 7.5em;border-left-width: 7.5em;margin: 0 0 6rem 0;
}
#lock:before {content: "";box-sizing: border-box;position: absolute;border: 2.5em solid red;width: 14em;height: 12em;left: 50%;margin-left: -7em;top: -12em;border-top-left-radius: 7em;border-top-right-radius: 7em;
}
#lock:after {content: "";box-sizing: border-box;position: absolute;border: 1em solid red;width: 5em;height: 8em;border-radius: 2.5em;left: 50%;top: -1em;margin-left: -2.5em;
}【CSS】css3绘制各种形状图形三角形，菱形，五角星，椭圆等相关推荐
- css绘制各种形状图形
虽然我们现在大都使用字体图标或者svg图片,似乎使用 CSS 来做图标意义不是很大,但怎么实现这些图标用到的一些技巧及思路是很值得我们的学习. 一.实心圆 .circle {width: 120px; ...
- web前端入门到实战：css绘制各种形状图形
虽然我们现在大都使用字体图标或者svg图片,似乎使用 CSS 来做图标意义不是很大,但怎么实现这些图标用到的一些技巧及思路是很值得我们的学习. 一.实心圆 .circle {width: 120px; ...
- qq css,CSS3绘制腾讯QQ企鹅
绘制我们的企鹅 前提,你已经看过CSS3绘制图形基本原理一文,已对一些基本图形绘制了解. 开始着手于QQ 企鹅的绘制, 第一步基本框架的绘制. result.png 通过对Logo图像的观察,按照层次 ...
- css3控制html中图片,精选4款用纯CSS3绘制的有趣图形
今天我们要来分享一些设计非常独特的人物和动物动画效果,它们都是通过HTML5和CSS3制作而成,有一些动画是利用纯CSS3实现的,一起来看看. 1.纯CSS3绘制可爱的蚱蜢 今天我们要分享一个利用纯C ...
- CSS制作的32种图形效果 梯形 | 三角 | 椭圆 | 平行四边形 | 菱形 | 四分之一圆 | 旗帜
在练习过程中,总结了一下常用的CSS实现三角形等常见规则图形,为了节省时间,下面图形都采用的一个标签,可以是块元素也可以是行内元素,不过行内元素需要加上"display:block;&quo ...
- 图表css,CSS3绘制简单图表 | Soo Smart!
学习css3的作业之一,制作一个简单的图表. 这里是源码和效果图. 参考文档:https://tympanus.net/Tutorials/Animated3DBarChart/ CSS源码: @me ...
- CSS3画圆环、各种三角形、五角星
一.圆环效果 实现步骤: 1.分析:它是由一个正方形通过border-radius属性转化为圆形的:空心可以由调大边框来实现. 代码如下: 先画出一个空心的正方形 div{margin: 100px ...
- css3:绘制android3蜂巢Honeycomb
之前写过一个类似的,css3绘制android机器人图形.谷歌最近发布了android3,这次的图形挺好看的,很多地方都用到圆角,所以就想到用css3来实现.点击观看演示 隔天再做了些修改,比之前的好 ...
- CSS绘制形状（三角形、四分之一圆、半圆、圆、梯形、球体、菱形）
CSS绘制形状(三角形.四分之一圆.半圆.圆.梯形.球体.菱形) 三角形 div {width: 0;height: 0;border: 200px solid transparent;border- ...
最新文章
- 快速检索并引用你在CSDN上所有的博文笔记
- c语言常量类型转换,c语言基础教程常量变量和类型转换,免费版.doc
- C语言经典例98-将字符转为大写字母并写入文件
- MySQL学习笔记 约束以及修改数据表
- “触达率图”新功能上线，量化网页浏览深度
- linux版_微软爱 Linux：安全杀毒软件 Defender ATP 要出 Linux 版了！ | Linux 中国
- asp.net用url重写URLReWriter实现任意二级域名(续)
- Maven手工管理项目
- GDAL读写矢量文件——Python
- Matlab Tricks（一）—— figure(1)
- 20171130C语言知识点梳理
- OpenGL ES2 学习教程5——顶点属性
- windows清理_10款欧美流行的Windows清理软件
- namecheap域名注册商怎么样?可以注册哪些后缀域名?
- 【C++】模板类的友元函数
- 汽车重点转向驾驶员监控系统
- 二、Nio之Channel
- Python数据可视化整理
- c语言中 程序各步作用,C语言学习网总结C语言学习五步曲
- Android运行ListView的代码,Android ListView组件详解及示例代码