css 32种图形绘制

最新推荐文章于 2021-08-03 23:36:53 发布
最新推荐文章于 2021-08-03 23:36:53 发布
阅读量625 收藏
点赞数
1、正方形（square）：

CSS Code:

  1. .square {
  2. width: 100px;
  3. height: 100px;
  4. background: #E5C3B2;
  5. }

上面的方法是，设置宽度和高度一致就可以实现正方形的效果，下面展示一种boder制作正方形的效果：

  1. .square {
  2. width: 0;
  3. height: 0;
  4. border: 50px solid #E5C3B2; /*边框大小等于正方形宽度（或高度）的一半*/
  5. }

效果：

2、平行四边形（parallelogram）

CSS Code:

  1. .parallelogram {
  2. width: 100px;
  3. height: 70px;
  4. -webkit-transform: skew(20deg);
  5. -moz-transform: skew(20deg);
  6. -o-transform: skew(20deg);
  7. -ms-transform: skew(20deg);
  8. transform: skew(20deg);
  9. background: #E5C3B2;
  10. }

效果：

我们可以通过“skew”的值大小来控制角度，如果其值为负值，将会改变扭曲方向：

  1. .parallelogram2 {
  2. width: 100px;
  3. height: 70px;
  4. -webkit-transform: skew(-20deg);
  5. -moz-transform: skew(-20deg);
  6. -o-transform: skew(-20deg);
  7. -ms-transform: skew(-20deg);
  8. transform: skew(-20deg);
  9. background: #E5C3B2;
  10. }

效果：

3、菱形(diamond)

CSS Code:

  1. .diamond {
  2. width: 80px;
  3. height: 80px;
  4. margin: 40px 0 0 40px;
  5. -webkit-transform-origin: 0 100%;
  6. -moz-transform-origin: 0 100%;
  7. -o-transform-origin: 0 100%;
  8. -ms-transform-origin: 0 100%;
  9. transform-origin: 0 100%;
  10. -webkit-transform: rotate(-45deg);
  11. -moz-transform: rotate(-45deg);
  12. -o-transform: rotate(-45deg);
  13. -ms-transform: rotate(-45deg);
  14. transform: rotate(-45deg);
  15. background: #E5C3B2;
  16. }

效果：

4、长方形（）

CSS Code:

  1. .rectangle {
  2. width: 100px;
  3. height: 50px;
  4. background: #E5C3B2;
  5. }


效果：

5、梯形（trapezoid）

梯形一

CSS Code:

  1. .trapezoid-1 {
  2. height: 0;
  3. width: 100px;
  4. border-bottom: 100px solid #e5c3b2;
  5. border-left: 60px solid transparent;
  6. border-right: 60px solid transparent;
  7. }

效果：

梯形二

CSS Code:

  1. .trapezoid-2 {
  2. height: 0;
  3. width: 100px;
  4. border-top: 100px solid #e5c3b2;
  5. border-left: 60px solid transparent;
  6. border-right: 60px solid transparent;
  7. }

效果：

梯形三

CSS Code:

  1. .trapezoid-3 {
  2. height: 100px;
  3. width: 0;
  4. border-right: 100px solid #e5c3b2;
  5. border-top: 60px solid transparent;
  6. border-bottom: 60px solid transparent;
  7. }

效果：

梯形四

CSS Code:

  1. .trapezoid-4 {
  2. height: 100px;
  3. width: 0;
  4. border-left: 100px solid #e5c3b2;
  5. border-top: 60px solid transparent;
  6. border-bottom: 60px solid transparent;
  7. }

效果：

6、三角形（triangle）

三角形朝上

CSS Code:

  1. .triangle-up {
  2. height: 0;
  3. width: 0;
  4. border: 50px solid #e5c3b2;
  5. border-color:transparent transparent #e5c3b2 transparent;
  6. }

效果：

三角朝右

CSS Code:

  1. .triangle-rihgt {
  2. height: 0;
  3. width: 0;
  4. border: 50px solid #e5c3b2;
  5. border-color:transparent transparent transparent #e5c3b2;
  6. }

效果：

三角朝下

CSS Code:

  1. .triangle-down {
  2. height: 0;
  3. width: 0;
  4. border: 50px solid #e5c3b2;
  5. border-color: #e5c3b2 transparent transparent transparent;
  6. }

效果：

三角朝左

CSS Code:

  1. .triangle-left {
  2. height: 0;
  3. width: 0;
  4. border: 50px solid #e5c3b2;
  5. border-color:transparent #e5c3b2 transparent transparent;
  6. }

效果：

7、半圆（semicircle）

上半圆

CSS Code:

  1. .semicircle-top {
  2. background: #e5c3b2;
  3. height: 25px;
  4. width: 50px;
  5. -moz-border-radius: 50px 50px 0 0;
  6. -webkit-border-radius: 50px 50px 0 0;
  7. border-radius: 50px 50px 0 0;
  8. }

效果：

右半圆

CSS Code:

  1. .semicircle-right {
  2. background: #e5c3b2;
  3. height: 50px;
  4. width: 25px;
  5. -moz-border-radius: 0 0px 50px 0;
  6. -webkit-border-radius: 0 50px 50px 0;
  7. border-radius: 0 50px 50px 0;
  8. }

效果：

下半圆

CSS Code:

  1. .semicircle-down {
  2. background: #e5c3b2;
  3. height: 25px;
  4. width: 50px;
  5. -moz-border-radius: 0 0 50px 50px;
  6. -webkit-border-radius: 0 0 50px 50px;
  7. border-radius: 0 0 50px 50px;
  8. }

效果：

左半圆

CSS Code:

  1. .semicircle-left {
  2. background: #e5c3b2;
  3. height: 50px;
  4. width: 25px;
  5. -moz-border-radius: 50px 0 0 50px;
  6. -webkit-border-radius: 50px 0 0 50px;
  7. border-radius: 50px 0 0 50px;
  8. }

效果：

8、圆（circle）

CSS Code:

  1. .circle {
  2. background: #e5c3b2;
  3. height: 50px;
  4. width: 50px;
  5. -moz-border-radius: 25px;
  6. -webkit-border-radius: 25px;
  7. border-radius: 25px;
  8. }

效果：

9、椭圆（oval）

水平椭圆

CSS Code:

  1. .ovalHor {
  2. background: #e5c3b2;
  3. height: 40px;
  4. width: 80px;
  5. -moz-border-radius: 40px/ 20px;
  6. -webkit-border-radius: 40px/ 20px;
  7. border-radius: 40px/ 20px;
  8. }

效果：

垂直椭圆

CSS Code:

  1. .ovalVert {
  2. background: #e5c3b2;
  3. height: 80px;
  4. width: 40px;
  5. -moz-border-radius: 20px/ 40px;
  6. -webkit-border-radius: 20px/ 40px;
  7. border-radius: 20px/ 40px;
  8. }

效果：

10、表图（chartColorful）

CSS Code:

  1. .chartColorful {
  2. height: 0px;
  3. width: 0px;
  4. border: 50px solid red;
  5. border-color:purple red yellow orange;
  6. -moz-border-radius: 50px;
  7. -webkit-border-radius: 50px;
  8. border-radius: 50px;
  9. }

效果：

11、四分之一圆（quarterCircle）

四分之一圆（上）

CSS Code:

  1. .quarterCircleTop {
  2. background: #e5c3b2;
  3. height: 50px;
  4. width: 50px;
  5. -moz-border-radius: 50px 0 0 0;
  6. -webkit-border-radius: 50px 0 0 0;
  7. border-radius: 50px 0 0 0;
  8. }

效果：

四分之一圆（右）

CSS Code:

  1. .quarterCircleRight {
  2. background: #e5c3b2;
  3. height: 50px;
  4. width: 50px;
  5. -moz-border-radius: 0 50px 0 0;
  6. -webkit-border-radius: 0 50px 0 0;
  7. border-radius: 0 50px 0 0;
  8. }

效果：

四分之一圆（下）

CSS Code:

  1. .quarterCircleBottom {
  2. background: #e5c3b2;
  3. height: 50px;
  4. width: 50px;
  5. -moz-border-radius: 0 0 50px 0;
  6. -webkit-border-radius: 0 0 50px 0;
  7. border-radius: 0 0 50px 0;
  8. }

效果：

四分之一圆（左）

CSS Code:

  1. .quarterCircleLeft {
  2. background: #e5c3b2;
  3. height: 50px;
  4. width: 50px;
  5. -moz-border-radius: 0 0 0 50px;
  6. -webkit-border-radius: 0 0 0 50px;
  7. border-radius: 0 0 0 50px;
  8. }

效果：

12、Chart（quarterCircle）

Chart（上）

CSS Code:

  1. .chartTop {
  2. height: 0px;
  3. width: 0px;
  4. border: 50px solid #e5c3b2;
  5. border-top-color:transparent;
  6. -moz-border-radius: 50px;
  7. -webkit-border-radius: 50px;
  8. border-radius: 50px;
  9. }

效果：

Chart（右）

CSS Code:

  1. .chartRight {
  2. height: 0px;
  3. width: 0px;
  4. border: 50px solid #e5c3b2;
  5. border-right-color:transparent;
  6. -moz-border-radius: 50px;
  7. -webkit-border-radius: 50px;
  8. border-radius: 50px;
  9. }

效果：

Chart（下）

CSS Code:

  1. .chartBottom {
  2.      height: 0px;
  3.      width: 0px;
  4.      border: 50px solid #e5c3b2;
  5.      border-bottom-color:transparent;
  6.      -moz-border-radius: 50px;
  7.      -webkit-border-radius: 50px;
  8.      border-radius: 50px;
  9. }

效果：

Chart（左）

CSS Code:

  1. .chartLeft {
  2. height: 0px;
  3. width: 0px;
  4. border: 50px solid #e5c3b2;
  5. border-left-color:transparent;
  6. -moz-border-radius: 50px;
  7. -webkit-border-radius: 50px;
  8. border-radius: 50px;
  9. }

效果：

13、心形（heart）

左心形

CSS Code

  1. .heartLeft {
  2. width: 0;
  3. height: 0;
  4. border-color:red;
  5. border-style:dotted;
  6. border-width: 0 40px 40px 0;
  7. }

效果：

右心形

CSS Code

  1. .heartRight {
  2. width: 0;
  3. height: 0;
  4. border-color:red;
  5. border-style:dotted;
  6. border-width: 0 0 40px 40px;
  7. }

效果：

14、彩带（ribbon）

CSS Code

  1. .ribbon {
  2. width: 0;
  3. height: 100px;
  4. border-left: 50px solid red;
  5. border-right: 50px solid red;
  6. border-bottom: 35px solid transparent
  7. }

效果：

LGDmar
关注
CSS图形绘制
落枫秋歌
10-25 362
圆 使用border-radius特性； 代码实现，具体可见jsfiddle.net <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>CSS图形绘制</title> </head> <body> &...
CSS各种图形绘制
NiceGY
07-21 1238
CSS各种图形绘制 /*绘正方形*/ .square{ width:100px; height:100px; } /*绘长方形*/ .retangle{ width:200px; height:100px; }
奇妙的 CSS shapes(CSS图形)
weixin_34413065的博客
06-12 272
CSS 发展到今天已经越来越强大了。其语法的日新月异，让很多以前完成不了的事情，现在可以非常轻松的做到。今天就向大家介绍几个比较新的强大的 CSS 功能： clip-path shape-outside shape 的意思是图形，CSS shapes 也就是 CSS 图形的意思，也就是使用 CSS 生成各种图形（圆形、矩形、椭圆、多边形等几何图形）。 CSS3之前，我们能做的只有矩...
CSS3实现32种基本图形
程序猿开发日志【学习永无止境】
04-20 4929
CSS3实现32种基本图形      CSS3可以实现很多漂亮的图形，我收集了32种图形，在下面列出。直接用CSS3画出这些图形，要比贴图性能更好，体验更加，是一种非常好的网页美观方式。      这32种图形分别为圆形，椭圆形，三角形，倒三角形，左三角形，右三角形，菱形，梯形，长方形，正方形，圆环，平行四边形，五角星，六角星，五边形，六边形，八边形，心形，蛋形，无穷符号，消息提示框，
CSS制作的32种图形效果
pyzheng的专栏
07-29 282
[url]http://www.w3cplus.com/css/css-simple-shapes-cheat-sheet[/url]
纯CSS制作各种图形
web_note的博客
11-16 717
Square(正方形) #square { width: 100px; height: 100px; background: red;} Rectangle(矩形) #rectangle { width: 200px; height: 100px; background: red;} Circle(圆形) #circle { width:
使用css实现圆角图形绘制
09-25
文章中提到的是一种利用多个`span`标签和CSS的`overflow: hidden;`属性来实现圆角的方法。这种方法主要通过创建多个层叠的`span`元素，通过改变`margin`和`border`来模拟出圆角的效果。每个`span`元素代表圆角的一个...
CSS_shape.zip_CSS 绘制图形
09-21
本压缩包“CSS_shape.zip”聚焦于利用CSS来绘制各种有趣的图形，使得网页设计更加丰富多彩。通过直接复制和使用提供的代码，你可以快速地在自己的项目中实现这些图形。 首先，`css_shape.html`是主示例文件，它可能...
CSS实现绘制45种常见图形
AKIM一枚
05-22 818
CSS能够生成各种形状。正方形和矩形很容易，因为它们是 web 的自然形状。添加宽度和高度，就得到了所需的精确大小的矩形。添加边框半径，你就可以把这个形状变成圆形，足够多的边框半...
纯css绘制几何图形
05-15
总结，纯CSS绘制几何图形是一种实用且有趣的技巧，它能帮助开发者在不依赖额外图像资源的情况下，创造出富有动态和创新性的网页设计。无论是简单的三角形、圆形，还是复杂的多边形，都可以通过巧妙的CSS技巧实现。...
用css绘制图形,CSS绘制各种图形的方法
weixin_31516987的博客
08-03 474
CSS绘制各种图形的方法Square(正方形)#square{width:100px;height:100px;backgroud:red;}Rectangle(矩形)#rectangle {width: 200px;height: 100px;background: red;Circle(圆形)#circle {width: 100px;height: 100px;background: red...
CSS 32
weixin_30587927的博客
07-24 105
23 转载于:https://www.cnblogs.com/xiaobaiv/p/9363332.html
CSS绘制简单图形
weixin_30384217的博客
05-02 150
　　究竟该用字体图标、图片图标、还是CSS画一个图标？我也不知道。各有千秋吧。本文将介绍如何用css绘制简单的图形，所有测试在chrome58.0完成，如果你不能得到正确结果请到caniuse查一查看看是不是需要什么前缀。 一、基础 <!DOCTYPE html> <html> <head> <title>basic shape...
纯css图形
qq_39958629的博客
07-11 131
1.html <div class="a1">向上</div> <div class="a2">右下</div> 2.css .a1{ width:0; height:0; border-left:50px solid transparent; border-right:50px solid transparent; border-bot...
纯CSS图形
weixin_30408165的博客
03-07 83
1.心形 1 <!doctype html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8"> 5 <title>xin</title> 6 <style type="text/css"> 7 #myt{ ...
纯css3绘制各种图形图标样式代码
11-24
本话题主要聚焦于使用CSS3来绘制各种图形和图标，这是一种高效且灵活的方法，可以替代传统的图像资源，减少页面加载时间，并有利于响应式设计。 首先，CSS3中的`border-radius`属性可以用来创建圆形或椭圆形，例如...
css画图形
hfc123hfc123的博客
05-21 421
收藏使用https://blog.csdn.net/dearmorning/article/details/55684378
CSS制作图形
weixin_34190136的博客
01-11 186
气泡三角形 <section id="bubbly" class="code-wrap cf"> <div class="css-live-wrap"> <summary>利用 border 的 transparent 特性实现</summary&g...
css 绘制各种图形
xzc2677的专栏
11-20 719
css 绘制各种图形 http://www.itivy.com/ivy/archive/2012/1/16/css-shape.html
CSS制作图形速查表
hmonkey915的专栏
02-28 472
前面在《纯CSS制作的图形效果》一文中介绍了十六种CSS画各种不同图形的方法。今天花了点时间将这方面的制作成一份清单，方便大家急用时有地方可查。别的不多说了，直接看代码。 为了节省时间，下面图形都采用的一个标签，可以是块元素也可以是行内元素，不过行内元素需要加上“display:block;”，唯一不同的是，在此用了不同的类名来区别，相关类名我放在了标题的后面，以便大家对应查看。 1、
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值