纯CSS绘制形状

1、三角形

原理是通过设置元素的边框颜色来实现三角形效果，元素的宽高一定设置为0。 此方法在真实项目中不可行，通过图片可以看出并不是真正意义上的三角形，其中还夹杂着其他边框的值。

.triangle { width: 0; height: 0; border: 86px solid blue; /* 可以通过改变边框的颜色来控制三角形的方向 */ border-color: blue transparent transparent transparent; } 

2、梯形

第一步 设置边框大小和颜色 第二步 分别设置边框颜色，设置底部边框为与第一步颜色一致，其余三个面设置颜色为透明色 最终达到覆盖的效果 此方法在真实项目中无法实践，通过图片可以看出并不是真正意义上的梯形，其中还夹杂着其他边框的值。

.trapezoid { width: 86px; border: 68px solid blue; border-color: transparent transparent blue transparent; } 

3、圆形

方法可行，可实践。

.circular{ width: 86px; height: 86px; border-radius: 50%; background: blue; } 

4、球体

w3school

radius-gradient()函数将径向渐变设置为背景图像。 径向渐变由其中心定义。 如需创建径向渐变，您必须定义至少两个色标。

序号 值 描述 1 shape 定义渐变的形状。 可能的值： ellipse（默认） circle 2 size 定义渐变的尺寸。 可能的值： farthest-corner（默认） closest-side closest-corner farthest-side 3 position 定义渐变的位置。默认值是 “center”。 4 start-color, …, last-color 色标是您要在其间呈现平滑过渡的颜色。该值由一个颜色值组成，其后是一个可选的停止位置（0％ 到 100％ 之间的百分比值，或沿渐变轴的长度值）。

MDN

radial-gradient()CSS函数创建一个图像，该图像由从原点辐射的两种或多种颜色之间的渐进过渡组成。它的形状可以是圆形或椭圆形。函数的结果是数据类型的对象。这是一种特别的。

.sphere { width: 86px; height: 86px; border-radius: 50%; background: radial-gradient(circle at 43px 43px, #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、菱形

w3school

transform属性向元素应用2D或3D转换。该属性允许我们对元素进行旋转、缩放、移动或倾斜。

MDN

transform属性允许你旋转，缩放，倾斜或平移给定元素。这是通过修改CSS视觉格式化模型的坐标空间来实现的。 rotateZ()函数定义了一个转换，它可以让一个元素围绕横Z轴旋转，而不会对其进行变形。它的结果是一个数据类型。

.diamond{ width: 100px; height: 100px; transform: rotateZ(45deg) skew(30deg, 30deg); background: blue; } 

8、心形

.heart_shaped { width: 100px; height: 100px; transform: rotateZ(45deg); background: red; } .heart_shaped::after,
.heart_shaped::before { content: ""; width: 100%; height: 100%; border-radius: 50%; display: block; background: red; position: absolute; top: -50%; left: 0; } .heart_shaped::before { top: 0; left: -50%; } 

9、五边形

.pentagon { width: 100px; position: relative; border-width: 105px 50px 0; border-style: solid; border-color: blue transparent; } .pentagon: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、圆柱体

<div class="b_1s_red"> <div class="cylinder"> <div class="ellipse"> 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、长方体

<div class="cuboid">  <div class="front"> <div class="back"> <div class="left"> <div class="right"> <div class="top"> <div class="bottom"> 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; } 

12、棱锥

<div class="pyramid">  <div class="front"> <div class="back"> <div class="left"> <div class="right"> <div class="bottom"> 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%; } 

13、演示