纯CSS绘制形状（三角形、菱形、球体，长方体等等
2024-05-15 02:13:11
在前段时间看到有的面试题说让说一下梯形，当时自己懵了，所以把各种各样的常见的形状的CSS实现总结一下，基本形状实现之后就可以利用这些基本形状进行组合，就可以实现复杂的形状：
1、三角形
.triangle{ width: 0; height: 0; border: 50px solid blue; //可以通过改变边框的颜色来控制三角形的方向border-color: blue transparent transparent transparent; }
2、梯形
.trapzoid{ width: 40px; height: 100px; border: 50px solid blue; border-color: transparent transparent blue transparent; }
实现的效果如图：
4、圆形
.circle{ width: 100px; height: 100px; border-radius: 50%; background: blue; }
实现的效果：
4、球体
.sphere{ width: 100px; height: 100px; border-radius: 50%; background: radial-gradient(circle at 70px 70px,#5cabff,#000000); }
实现的效果如下：
5、椭圆
.ellipse{ width: 200px; height: 100px; border-radius: 50%; background: blue; }
实现的效果：
6、半圆
.semicircle{ width: 50px; height: 100px; border-radius: 50px 0 0 50px ; background: blue; }
效果如下：
7、菱形
.rhombus{width: 100px;height: 100px;transform: rotateZ(45deg)skew(30deg,30deg);background: blue;}
效果如下：
8、心
心是由两个圆形与一个矩形进行组合的
.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%;}效果：
9、五边形
五边形是由三角形和梯形组成的
.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; }效果：
10、圆柱体
由一个椭圆和一个圆角矩形进行组合
.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; }效果：
11、长方体
由六个矩形实现
.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;
}
<div class="cuboid"><!--前面 --><div class="front"></div><!--后面 --><div class="back"></div><!--左面 --><div class="left"></div><!--右面 --><div class="right"></div><!--上面 --><div class="top"></div><!--下面 --><div class="bottom"></div>
</div>效果：
12、棱锥
四个三角形和一个矩形组成
.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%;
}
<div class="pyramid"><!--前面 --><div class="front"></div><!--后面 --><div class="back"></div><!--左面 --><div class="left"></div><!--右面 --><div class="right"></div><!--下面 --><div class="bottom"></div>
</div>效果：
还有很多没有整理上，遇到了再继续补全，如果有不对的望指正！！！！
纯CSS绘制形状（三角形、菱形、球体，长方体等等相关推荐
- CSS绘制形状（三角形、四分之一圆、半圆、圆、梯形、球体、菱形）
CSS绘制形状(三角形.四分之一圆.半圆.圆.梯形.球体.菱形) 三角形 div {width: 0;height: 0;border: 200px solid transparent;border- ...
- html css右下角三角形,纯CSS绘制三角形（各种角度）
CSS/HTML 的 纯CSS绘制三角形(各种角度) 我们的网页因为 CSS 而呈现千变万化的风格.这一看似简单的样式语言在使用中非常灵活,只要你发挥创意就能实现很多比人想象不到的效果.特别是随着 C ...
- html div三角形,【div】纯CSS绘制三角形
原标题:[div]纯CSS绘制三角形 我们的网页因为 CSS 而呈现千变万化的风格.这一看似简单的样式语言在使用中非常灵活,只要你发挥创意就能实现很多比人想象不到的效果.特别是随着 CSS3 的广泛使 ...
- 纯CSS 绘制三角形气泡框
1.用纯css绘制带三角型的气泡框,不适合用图片 2.绘制的原理:当width和height均为0时,bord不为0时,边界交换处以45度角平分. 例子:先画一个三角吧 .dr{width:0px; ...
- 28.纯 CSS 绘制一个世界上不存在的彭罗斯三角形
28.纯 CSS 绘制一个世界上不存在的彭罗斯三角形 原文地址:https://segmentfault.com/a/1190000014946883 感想:三个平面图形旋转 HTML代码: < ...
- CSS 魔法系列：纯 CSS 绘制基本图形（圆、椭圆等）
我们的网页因为 CSS 而呈现千变万化的风格.这一看似简单的样式语言在使用中非常灵活,只要你发挥创意就能实现很多比人想象不到的效果.特别是随着 CSS3 的广泛使用,更多新奇的 CSS 作品涌现出来. ...
- [css] 用CSS绘制一个三角形
[css] 用CSS绘制一个三角形 .triangle{width: 0;border-bottom: 35px solid lightgreen;border-left: 35px solid tr ...
- CSS 魔法系列：纯 CSS 绘制各种图形《系列五》
我们的网页因为 CSS 而呈现千变万化的风格.这一看似简单的样式语言在使用中非常灵活,只要你发挥创意就能实现很多比人想象不到的效果.特别是随着 CSS3 的广泛使用,更多新奇的 CSS 作品涌现出来. ...
- css空心三角形_纯CSS制作空心三角形和实心三角形及其实现原理
纯CSS制作空心三角形和实心三角形及其实现原理 在一次项目中需要使用到空心三角形,我瞬间懵逼了.查阅了一些资料加上自己的分析思考,终于是达到了效果,个人感觉制作三角形是使用频率很高的,因此记录下来,供 ...
最新文章
- 架构师的第一阶段：准备做（Pre-Architecture）
- 互联网话题: 陈冠希, 张柏芝, 台湾, ASP与雪灾
- 系统试运行总结报告_制药行业计算机化系统验证与数据可靠性实施精要
- python学习day-4 集合与函数
- PyTorch实战福利从入门到精通之三——autograd
- git21天打卡day19-新建远程仓库
- python之使用numpy实现从二维数组中找出行（子数组）为特定值的索引
- SQL中的集合运算有必要存在的几个例子
- 十五秒破解“还原卡”
- python两台电脑文件传输_两台电脑怎么互相连接传送文件？
- 如何用python修改安卓和iOS的微信和支付宝步数！
- GAX (Guidance Automation Extensions) 与 GAT (Guidance Automation Toolkit)
- TeamViewer14试用版到期怎么解决--免费许可证（仅非商业用途）
- 线程的终止的4种方式
- 2020浙江工业大学程序设计迎新赛——决赛（重现赛）G-抽卡
- 《平台战略:正在席卷全球的商业模式革命》有感
- Black-Scholes期权定价模型
- 星际争霸 虚空之遗 人族5BB 操作流程
- 专家访谈：Flex技术对web开发的影响
- 红米笔记本linux系统版本,一招让你的手机拥有三系统甚至四系统: WINDOWS+安卓+Linux...