CSS 绘制各种形状(css font-size)

100人浏览 2024-09-01 08:04:01

说明

使用 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;
}
复制代码
<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> 
复制代码

查看示例

圆柱体

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

.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;
}
复制代码
<div class="cylinder">
 <div class="ellipse"></div>
 <div class="rectangle"></div>
</div>
复制代码

查看示例

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

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%;
}
复制代码
<div class="pyramid">
 <!--前面 -->
 <div class="front"></div>
 <!--后面 -->
 <div class="back"></div>
 <!--左面 -->
 <div class="left"></div>
 <!--右面 -->
 <div class="right"></div>
 <!--下面 -->
 <div class="bottom"></div>
</div>
复制代码