说明

使用 CSS 可以绘制出许多形状，比如三角形、梯形、圆形、椭圆，等 并不只是可以绘制矩形。下面来看看怎么实现这些形状的吧。

为了容易理解，文章分为基本形状 和 组合形状来说，基本形状是比较容易实现的，而利用这些基本形状进行组合，就可以实现稍微复杂点的组合形状了。

基本形状

三角形

.triangle {

width: 0;

height: 0;

border: 50px solid blue;

/* 通过改变边框颜色，可以改变三角形的方向 */

border-color: blue transparent transparent transparent;

}

梯形

.trapzoid {

width: 40px;

height: 100px;

border: 50px solid blue;

border-color: transparent transparent blue transparent;

}

圆形

.circle{

width:100px;

height:100px;

border-radius:50%;

background:blue;

}

球体

.sphere {

height: 200px;

width: 200px;

border-radius: 50%;

background: radial-gradient(circle at 70px 70px, #5cabff, #000);

}

椭圆

.ellipse {

width: 200px;

height: 100px;

border-radius: 50%;

background: blue;

}

半圆

.semicircle {

width: 50px;

height: 100px;

/* "/"前四个值表示圆角的水平半径，后四个值表示圆角的垂直半径*/

border-radius: 200% 0 0 200% / 100% 0 0 100%;

/* 效果和用%一样 */

/* border-radius: 50px 0 0 50px; */

background: blue;

}

菱形

.rhombus {

width: 200px;

height: 200px;

transform: rotateZ(45deg) skew(30deg, 30deg);

background: blue;

}

组合形状

心形

心形是由两个圆形和一个矩形进行组合得到的。

.heart {

width: 100px;

height: 100px;

transform: rotateZ(45deg);

background: red;

}

.heart::after,

.heart::before {

content: "";

width: 100%;

height: 100%;

border-radius: 50%;

display: block;

background: red;

position: absolute;

top: -50%;

left: 0;

}

.heart::before {

top: 0;

left: -50%;

}

扇形

扇形是由一个圆形和一个矩形进行组合得到的，用矩形遮住圆形的一部分就形成了扇形。

.sector {

width: 142px;

height: 142px;

background: #fff;

border-radius: 50%;

background-image: linear-gradient(to right, transparent 50%, #655 0);

}

.sector::before {

content: '';

display: block;

margin-left: 50%;

height: 100%;

width: 100%;

background-color: inherit;

transform-origin: left;

/*调整角度，改变扇形大小*/

transform: rotate(230deg);

}

五边形

五边形是由一个三角形和一个梯形进行组合得到的。

.pentagonal {

width: 100px;

position: relative;

border-width: 105px 50px 0;

border-style: solid;

border-color: blue transparent;

}

.pentagonal:before {

content: "";

position: absolute;

width: 0;

height: 0;

top: -185px;

left: -50px;

border-width: 0px 100px 80px;

border-style: solid;

border-color: transparent transparent blue;

}

六边形

六边形是由两个三角形和一个矩形进行组合得到的。

.hexagon {

width: 200px;

height: 100px;

background-color: blue;

position: relative;

}

.hexagon:before {

content: "";

position: absolute;

top: -60px;

left: 0;

width: 0;

height: 0;

border-left: 100px solid transparent;

border-right: 100px solid transparent;

border-bottom: 60px solid blue;

}

.hexagon:after {

content: "";

left: 0;

width: 0;

height: 0;

bottom: -60px;

position: absolute;

border-left: 100px solid transparent;

border-right: 100px solid transparent;

border-top: 60px solid blue;

}

长方体

长方体是由六个矩形进行组合得到的。

.cuboid {

width: 200px;

height: 200px;

transform-style: preserve-3d;

transform: rotateX(-30deg) rotateY(-80deg);

}

.cuboid div {

position: absolute;

width: 200px;

height: 200px;

opacity: 0.8;

transition: .4s;

}

.cuboid .front {

transform: rotateY(0deg) translateZ(100px);

background: #a3daff;

}

.cuboid .back {

transform: translateZ(-100px) rotateY(180deg);

background: #a3daff;

}

.cuboid .left {

transform: rotateY(-90deg) translateZ(100px);

background: #1ec0ff;

}

.cuboid .right {

transform: rotateY(90deg) translateZ(100px);

background: #1ec0ff;

}

.cuboid .top {

transform: rotateX(90deg) translateZ(100px);

background: #0080ff;

}

.cuboid .bottom {

transform: rotateX(-90deg) translateZ(100px);

background: #0080ff;

}

圆柱体

圆柱体是由一个椭圆和一个圆角矩形进行组合得到的。

.cylinder {

position: relative;

transform: rotateX(70deg);

}

.ellipse {

width: 100px;

height: 100px;

background: deepskyblue;

border-radius: 50px;

}

.rectangle {

width: 100px;

height: 400px;

position: absolute;

opacity: 0.6;

background: deepskyblue;

top: 0;

left: 0;

border-radius: 50px;

z-index: -1;

}

如果使用了渐变色，看上去会更像一些。

background-image: linear-gradient(to right, rgba(255, 255, 255, 0.2) 0, rgba(255, 255, 255, 0.8) 0%, rgba(255, 255, 255, 0.2) 100%);

棱锥

棱锥是由四个三角形和一个矩形进行组合得到的。

.pyramid {

width: 200px;

height: 200px;

transform-style: preserve-3d;

transform: rotateX(-30deg) rotateY(-80deg);

}

.pyramid div {

position: absolute;

top: -100px;

width: 0px;

height: 0px;

border: 100px solid transparent;

border-bottom-width: 200px;

opacity: 0.8;

}

.pyramid .front {

transform: translateZ(100px) rotateX(30deg);

border-bottom-color: #a3daff;

transform-origin: 0 100%;

}

.pyramid .back {

transform: translateZ(-100px) rotateX(-30deg);

border-bottom-color: #1ec0ff;

transform-origin: 0 100%;

}

.pyramid .left {

transform: translateX(-100px) rotateZ(30deg) rotateY(90deg);

border-bottom-color: #0080ff;

transform-origin: 50% 100%;

}

.pyramid .right {

transform: translateX(100px) rotateZ(-30deg) rotateY(90deg);

border-bottom-color: #03a6ff;

transform-origin: 50% 100%;

}

.pyramid .bottom {

transform: translateX(-100px) rotateZ(90deg) rotateY(90deg);

background: cyan;

width: 200px;

height: 200px;

border: 0;

top: 0;

transform-origin: 50% 100%;

}

总结

文中实现的各种形状，也许你觉得实现的很复杂，其实你也可以使用 clip-path 这一个属性，绘制各种形状。

CSS 能绘制的东西，不仅仅只有这些，还有很多很多，文中都没有说出来，而即便是文中已经实现的形状也不只有一种实现方式，有兴趣的小伙伴可以继续去探索。

最后

这里有一个使用各种形状进行组合，形成魔法阵的例子。

我们还可以给魔法阵中的形状增加动画，使魔法阵看上去更有趣。

css3制作八棱锥_CSS 绘制各种形状相关推荐

  1. css3制作八棱锥_CSS基础八部分-第二部分

    emmet语法 1.简介 Emmet语法的前身是Zen coding,它使用缩写,来提高html/css的编写速度, Vscode内部已经集成该语法. 2.快速生成HTML结构语法 生成标签 直接输入 ...

  2. css3制作八棱锥_CSS3制作各种形状图像

    星形: 星形的HTML结构同样使用一个带ID的空div.星形的实现方式比较复杂,主要是使用transform属性来旋转不同的边.仔细体会下面的代码. #star { width: 0; height: ...

  3. css3制作八棱锥_svg、canvas、css3d实现数据可视化（伪3D效果）

    前言: 这次如算上处定面一这我作问汇u应色会进灯样近项目用到了一些自定义的数据可视化组件,我把我做的部分抽出来几个典型功一新说讲为其年次供.发了架人据模制理个通似会业文告个了者到作会也转动和矿大一效做 ...

  4. html人物动画效果图,9款用HTML5/CSS3制作的动物、人物动画

    原标题:9款用HTML5/CSS3制作的动物.人物动画 今天我们要来分享一些设计非常独特的人物和动物动画效果,它们都是通过HTML5和CSS3制作而成,有一些动画是利用纯CSS3实现的,一起来看看. ...

  5. html 动物特效,分享9款用HTML5/CSS3制作的动物人物动画，

    分享9款用HTML5/CSS3制作的动物人物动画, 1.纯CSS3绘制可爱的蚱蜢 还有眨眼动画 今天我们要分享一个利用纯CSS3绘制的蚱蜢动画,非常可爱. 在线演示 源码下载 2.HTML5 Canv ...

  6. 9款用HTML5/CSS3制作的动物、人物动画

    今天我们要来分享一些设计非常独特的人物和动物动画效果,它们都是通过HTML5和CSS3制作而成,有一些动画是利用纯CSS3实现的,一起来看看. 1.纯CSS3绘制可爱的蚱蜢 还有眨眼动画 今天我们要分 ...

  7. 分享9款用HTML5/CSS3制作的动物、人物动画

    今天我们要来分享一些设计非常独特的人物和动物动画效果,它们都是通过HTML5和CSS3制作而成,有一些动画是利用纯CSS3实现的,一起来看看. 1.纯CSS3绘制可爱的蚱蜢 还有眨眼动画 今天我们要分 ...

  8. 纯CSS3制作卡通场景汽车动画效果

    前言 今天分享一下我昨晚做的CSS3动画效果--卡通场景汽车动画.在接触CSS3动画之前,我之前实现一些简单的动画效果都是使用flash完成的.但是自从CSS3横空出世,在移动端对CSS3动画的运用越 ...

  9. html插图动物主题代码,分享9款用HTML5/CSS3制作的动物、人物动画

    本文作者html5tricks,转载请注明出处 今天我们要来分享一些设计非常独特的人物和动物动画效果,它们都是通过 1.纯CSS3绘制可爱的蚱蜢 还有眨眼动画 今天我们要分享一个利用纯CSS3绘制的蚱 ...

最新文章

  1. 非本地类型不能定义方法 cannot define new methods on non-local type time.Duration
  2. Java集合框架源码解析之ArrayList
  3. linux 核间通讯rpmsg架构分析
  4. Stream流综合练习
  5. 15-description-Objective-C笔记
  6. KDD2021 | USCB:展示广告约束出价问题的通用解决方案
  7. PHP调用新浪API 生成短链接
  8. [剑指offer][JAVA]面试题第[04]题[二维数中的查找][数组]
  9. Java和poi导出excel报表
  10. 设计模式学习笔记六：.NET反射工厂
  11. Educational Codeforces Round 103 (Rated for Div. 2)A~E解题报告
  12. 内部类详解————静态内部类
  13. 用闭包的写法弹出元素的索引值
  14. 判断某点在多边形内——方法一
  15. 判断当前用户与审批人是否属于同一个部门
  16. 产品读书《产品经理的第一本书》
  17. 浅谈HTML页面基本结构
  18. Ubuntu 编译ijkplayer 支持几乎所有格式(MP4,mov,mkv,avi,wmv,m4v,mpg,webm,ogv,3g2.flv,f4v,swf)和https
  19. 循环结构（打印图形专项练习）
  20. google的秘密入口

热门文章

  1. DaisyDisk for mac(磁盘清理软件)中文版
  2. bzoj3811 玛里苟斯
  3. 机器人在gazebo中使用四轮差速仿真模型时，转向不明显？
  4. 【谷歌地图--DirectionsSDK集成】
  5. BlackJack--21点扑克游戏Java实现
  6. 分享一下我用Python接单的个人经历
  7. 【VBS】超级实用小实例：仅用数字编号打开任意指定文件夹（超超超级全面指南）
  8. ACDREAM 05D 哗啦啦族的加法计算（DFS专场）
  9. 对象存储OSS基本概念讲解
  10. 九段刀客 vue-router实现原理