CSS 繪製各種形狀

FEWY發表於2019-03-28

說明

使用 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>
複製程式碼

在這裡插入圖片描述

總結

文中實現的各種形狀，也許你覺得實現的很複雜，其實你也可以使用 clip-path 這一個屬性，繪製各種形狀。

CSS 能繪製的東西，不僅僅只有這些，還有很多很多，文中都沒有說出來，而即便是文中已經實現的形狀也不只有一種實現方式，有興趣的小夥伴可以繼續去探索。

最後

這裡有一個使用各種形狀進行組合，形成魔法陣的例子。

在這裡插入圖片描述

我們還可以給魔法陣中的形狀增加動畫，使魔法陣看上去更有趣。

在這裡插入圖片描述

相關文章

CSS繪製各種幾何形狀
2019-02-16
CSS
CSS繪製各種幾何圖形形狀效果
2018-07-14
CSS
【前端幫幫忙】第3期使用CSS的border屬性繪製各種幾何形狀
2019-02-22
前端CSS
Markdown繪製各種圖形———Mermaid語法
2024-03-25
AI
css繪製特殊圖形
2018-12-11
CSS
使用css繪製圖形
2019-03-13
CSS
如何使用 css 繪製心形
2019-02-06
CSS
好程式設計師web前端學習路線分享純css繪製各種圖形
2019-09-05
程式設計師Web前端CSS
css繪製圓形程式碼例項
2018-07-03
CSS
CSS繪製三角形
2024-08-23
CSS
OpenGL 學習系列---基本形狀的繪製
2018-05-25
CSS3繪製圖形圖案效果
2018-07-20
CSSS3
純css繪製三角形
2021-09-09
CSS
強大的CSS：圖形繪製合集，方便你我！
2019-05-23
CSS
繪製圖形
2018-09-14
Flutter 通過Clipper實現各種自定義形狀
2019-12-03
Flutter
用CSS繪製一個三角形
2024-11-22
CSS
canvas 繪製圓形
2018-10-22
Canvas
matplotlib繪製圖形
2020-10-15
java：繪製圖形
2022-11-23
Java
如何用純CSS繪製三角形--02
2024-08-20
CSS
如何用純CSS繪製三角形--03
2024-08-20
CSS
CSS3各種方向三角形效果
2018-05-23
CSSS3
SVG <circle> 繪製圓形
2018-09-21
SVG
CSS 繪製半圓
2019-11-20
CSS
CSS 繪製圓環
2019-11-20
CSS
SVG繪製餅狀圖
2018-10-15
SVG
Shader 繪製基礎圖形
2018-09-21
分段函式圖形繪製
2024-06-05
函式
CAD有趣圖形的繪製
2022-03-08
matlab繪製正多邊形
2020-11-29
Matlab
CSS & SVG 繪製寫作網格線的3種方式
2023-01-10
CSSSVG
各種CSS居中方案
2020-01-17
CSS
CSS佈局-各種居中
2022-09-07
CSS
Canvas(3)---繪製餅狀圖
2020-04-24
Canvas
MATLAB圖形繪製練習（一）
2018-07-13
Matlab
Excalidraw：繪製圖形的新利器
2024-03-19
CSS設定滑鼠指標形狀
2018-08-06
CSS指標