css3制作八棱锥_CSS 绘制各种形状
說(shuō)明
使用 CSS 可以繪制出許多形狀，比如三角形、梯形、圓形、橢圓，等 并不只是可以繪制矩形。下面來(lái)看看怎么實(shí)現(xiàn)這些形狀的吧。
為了容易理解，文章分為基本形狀 和 組合形狀來(lái)說(shuō)，基本形狀是比較容易實(shí)現(xiàn)的，而利用這些基本形狀進(jìn)行組合，就可以實(shí)現(xiàn)稍微復(fù)雜點(diǎn)的組合形狀了。
基本形狀
三角形
.triangle {
width: 0;
height: 0;
border: 50px solid blue;
/* 通過(guò)改變邊框顏色，可以改變?nèi)切蔚姆较?*/
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;
/* "/"前四個(gè)值表示圓角的水平半徑，后四個(gè)值表示圓角的垂直半徑*/
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;
}
組合形狀
心形
心形是由兩個(gè)圓形和一個(gè)矩形進(jìn)行組合得到的。
.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%;
}
扇形
扇形是由一個(gè)圓形和一個(gè)矩形進(jìn)行組合得到的，用矩形遮住圓形的一部分就形成了扇形。
.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;
/*調(diào)整角度，改變扇形大小*/
transform: rotate(230deg);
}
五邊形
五邊形是由一個(gè)三角形和一個(gè)梯形進(jìn)行組合得到的。
.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;
}
六邊形
六邊形是由兩個(gè)三角形和一個(gè)矩形進(jìn)行組合得到的。
.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;
}
長(zhǎng)方體
長(zhǎng)方體是由六個(gè)矩形進(jìn)行組合得到的。
.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;
}
圓柱體
圓柱體是由一個(gè)橢圓和一個(gè)圓角矩形進(jìn)行組合得到的。
.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;
}
如果使用了漸變色，看上去會(huì)更像一些。
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%);
棱錐
棱錐是由四個(gè)三角形和一個(gè)矩形進(jìn)行組合得到的。
.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%;
}
總結(jié)
文中實(shí)現(xiàn)的各種形狀，也許你覺(jué)得實(shí)現(xiàn)的很復(fù)雜，其實(shí)你也可以使用 clip-path 這一個(gè)屬性，繪制各種形狀。
CSS 能繪制的東西，不僅僅只有這些，還有很多很多，文中都沒(méi)有說(shuō)出來(lái)，而即便是文中已經(jīng)實(shí)現(xiàn)的形狀也不只有一種實(shí)現(xiàn)方式，有興趣的小伙伴可以繼續(xù)去探索。
最后
這里有一個(gè)使用各種形狀進(jìn)行組合，形成魔法陣的例子。
我們還可以給魔法陣中的形狀增加動(dòng)畫(huà)，使魔法陣看上去更有趣。
總結(jié)
以上是生活随笔為你收集整理的css3制作八棱锥_CSS 绘制各种形状的全部?jī)?nèi)容，希望文章能夠幫你解決所遇到的問(wèn)題。
- 上一篇： 卡诺图最简化SOP/POS表达式
- 下一篇： 技术概况python_《技》字意思读音、