【HTML】CSS奇思妙想之利用偽元素實(shí)現(xiàn)常見圖形：三角形、多邊形、紅心、箭頭、會話泡泡等

當(dāng)前位置：點(diǎn)晴教程→知識管理交流 →『技術(shù)文檔交流』

admin

2024年3月29日 23:31 本文熱度 1388

CSS是一種用于描述HTML或XML（包括如SVG，MathML等衍生語言）文檔樣式的樣式表語言，它不僅僅可以用于控制網(wǎng)頁的布局和顏色，還能夠?qū)W(wǎng)頁中元素位置的排版進(jìn)行像素級精確控制，能夠生成各種形狀，不管在日常的開發(fā)還是學(xué)習(xí)中，對我們都有幫助。

01

橢圓

和圓形類似，如果元素的寬度和高度不同，那么border-radius: 50%就會創(chuàng)建一個橢圓形。

<div id="oval"></div>

#oval {
  width: 200px;
  height: 100px;
  background: red;
  border-radius: 100px / 50px;
}

02

上、下、左、右三角形

利用邊框的特性，可以創(chuàng)建一個三角形，可以通過調(diào)整邊框的大小和顏色來創(chuàng)建不同方向和顏色的三角形。

<div id="triangle-up"></div>

#triangle-up {
  width: 0;
  height: 0;
  border-left: 50px solid transparent;
  border-right: 50px solid transparent;
  border-bottom: 100px solid red;
}

<div id="triangle-down"></div>

#triangle-down {
  width: 0;
  height: 0;
  border-left: 50px solid transparent;
  border-right: 50px solid transparent;
  border-top: 100px solid red;
}

<div id="triangle-left"></div>

#triangle-left {
  width: 0;
  height: 0;
  border-top: 50px solid transparent;
  border-right: 100px solid red;
  border-bottom: 50px solid transparent;
}

<div id="triangle-right"></div>

#triangle-right {
  width: 0;
  height: 0;
  border-top: 50px solid transparent;
  border-left: 100px solid red;
  border-bottom: 50px solid transparent;
}

03

左上、右上、左下、右下角

<div id="triangle-lefttop"></div>
<div id="triangle-righttop"></div>
<div id="triangle-leftbottom"></div>
<div id="triangle-rightbottom"></div>

/* 左上角 */
#triangle-lefttop {
  width: 0;
  height: 0;
  border-top: 100px solid red;
  border-right: 100px solid transparent;
}
/* 右上角 */
#triangle-righttop {
  width: 0;
  height: 0;
  border-top: 100px solid red;
  border-left: 100px solid transparent;
}
/* 左下角 */
#triangle-leftbottom {
  width: 0;
  height: 0;
  border-bottom: 100px solid red;
  border-right: 100px solid transparent;
}
/* 右下角 */
#triangle-rightbottom {
  width: 0;
  height: 0;
  border-bottom: 100px solid red;
  border-left: 100px solid transparent;
}

04

箭頭

<div id="curvedarrow"></div>

#curvedarrow {
  position: relative;
  width: 0;
  height: 0;
  border-top: 9px solid transparent;
  border-right: 9px solid red;
  transform: rotate(10deg);
}
#curvedarrow:after {
  content: "";
  position: absolute;
  border: 0 solid transparent;
  border-top: 3px solid red;
  border-radius: 20px 0 0 0;
  top: -14px;
  left: -9px;
  width: 14px;
  height: 14px;
  transform: rotate(45deg);
}

05

梯形

<div id="trapezoid"></div>

#trapezoid {
  border-bottom: 100px solid red;
  border-left: 25px solid transparent;
  border-right: 25px solid transparent;
  height: 0;
  width: 100px;
}

06

平行四邊形

<div id="parallelogram"></div>

#parallelogram {
  width: 150px;
  height: 100px;
  transform: skew(20deg);
  background: red;
}

07

五角星

<div id="star-five"></div>

#star-five {
  margin: 100px 0;
  position: relative;
  display: block;
  color: red;
  width: 0px;
  height: 0px;
  border-right: 100px solid transparent;
  border-bottom: 70px solid red;
  border-left: 100px solid transparent;
  transform: rotate(35deg);
}
#star-five:before {
  border-bottom: 80px solid red;
  border-left: 30px solid transparent;
  border-right: 30px solid transparent;
  position: absolute;
  height: 0;
  width: 0;
  top: -45px;
  left: -65px;
  display: block;
  content: '';
  transform: rotate(-35deg);
}
#star-five:after {
  position: absolute;
  display: block;
  color: red;
  content: '';
  top: 3px;
  left: -105px;
  width: 0px;
  height: 0px;
  border-right: 100px solid transparent;
  border-bottom: 70px solid red;
  border-left: 100px solid transparent;
  transform: rotate(-70deg);
}

08

五邊形

<div id="pentagon"></div>

#pentagon {
  position: relative;
  width: 54px;
  box-sizing: content-box;
  border-width: 50px 18px 0;
  border-style: solid;
  border-color: red transparent;
}
#pentagon:before {
  content: "";
  position: absolute;
  height: 0;
  width: 0;
  top: -85px;
  left: -18px;
  border-width: 0 45px 35px;
  border-style: solid;
  border-color: transparent transparent red;
}

09

六邊形

<div id="hexagon"></div>

#hexagon {
  width: 100px;
  height: 55px;
  background: red;
  position: relative;
}
#hexagon:before {
  content: "";
  position: absolute;
  top: -30px;
  left: 0;
  width: 0;
  height: 0;
  border-left: 50px solid transparent;
  border-right: 50px solid transparent;
  border-bottom: 30px solid red;
}
#hexagon:after {
  content: "";
  position: absolute;
  bottom: -30px;
  left: 0;
  width: 0;
  height: 0;
  border-left: 50px solid transparent;
  border-right: 50px solid transparent;
  border-top: 30px solid red;
}

11

八邊形

<div id="octagon"></div>

#octagon {
    width: 100px;
    height: 100px;
    background: red;
    position: relative;    
}

#octagon:before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    border-bottom: 29px solid red;
    border-left: 29px solid #fff;
    border-right: 29px solid #fff;
    width: 42px;
    height: 0;    
}

#octagon:after {
    content: "";
    position: absolute;
    bottom: 0;
    left: 0;
    border-top: 29px solid red;
    border-left: 29px solid #fff;
    border-right: 29px solid #fff;
    width: 42px;
    height: 0;    
}

12

愛心

<div id="heart"></div>

#heart {
  position: relative;
  width: 100px;
  height: 90px;
}
#heart:before,
#heart:after {
  position: absolute;
  content: "";
  left: 50px;
  top: 0;
  width: 50px;
  height: 80px;
  background: red;
  border-radius: 50px 50px 0 0;
  transform: rotate(-45deg);
  transform-origin: 0 100%;
}
#heart:after {
  left: 0;
  transform: rotate(45deg);
  transform-origin: 100% 100%;
}

13

對話泡泡

<div id="talkbubble"></div>

#talkbubble {
  width: 120px;
  height: 80px;
  background: red;
  position: relative;
  -moz-border-radius: 10px;
  -webkit-border-radius: 10px;
  border-radius: 10px;
}
#talkbubble:before {
  content: "";
  position: absolute;
  right: 100%;
  top: 26px;
  width: 0;
  height: 0;
  border-top: 13px solid transparent;
  border-right: 26px solid red;
  border-bottom: 13px solid transparent;
}

14

太極

<div id="taiji"></div>

#taiji {
  width: 96px;
  box-sizing: content-box;
  height: 48px;
  background: #eee;
  border-color: red;
  border-style: solid;
  border-width: 2px 2px 50px 2px;
  border-radius: 100%;
  position: relative;
}
#taiji:before {
  content: "";
  position: absolute;
  top: 50%;
  left: 0;
  background: #eee;
  border: 18px solid red;
  border-radius: 100%;
  width: 14px;
  height: 14px;
  box-sizing: content-box;
}
#taiji:after {
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  background: red;
  border: 18px solid #eee;
  border-radius: 100%;
  width: 14px;
  height: 14px;
  box-sizing: content-box;
}

15

12花瓣

<div id="flower-12"></div>

#flower-12 {
  background: red;
  width: 80px;
  height: 80px;
  position: relative;
  text-align: center;
}
#flower-12:before,
#flower-12:after {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  height: 80px;
  width: 80px;
  background: red;
}
#flower-12:before {
  transform: rotate(30deg);
}
#flower-12:after {
  transform: rotate(60deg);
}

16

8花瓣

<div id="flower-8"></div>

#flower-8 {
  background: red;
  width: 80px;
  height: 80px;
  position: relative;
  text-align: center;
  transform: rotate(20deg);
}
#flower-8:before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  height: 80px;
  width: 80px;
  background: red;
  transform: rotate(135deg);
}

17

徽章絲帶

<div id="badge-ribbon"></div>

#badge-ribbon {
  position: relative;
  background: red;
  height: 100px;
  width: 100px;
  border-radius: 50px;
}
#badge-ribbon:before,
#badge-ribbon:after {
  content: '';
  position: absolute;
  border-bottom: 70px solid red;
  border-left: 40px solid transparent;
  border-right: 40px solid transparent;
  top: 70px;
  left: -10px;
  transform: rotate(-140deg);
}
#badge-ribbon:after {
  left: auto;
  right: -10px;
  transform: rotate(140deg);
}

18

徽章絲帶

<div id="lock"></div>

#lock {
  font-size: 8px;
  position: relative;
  width: 180px;
  height: 130px;
  border-radius: 20px;
  top: 100px;
  box-sizing: border-box;
  border: 35px solid red;
  border-right-width: 75px;
  border-left-width: 75px;
  margin: 0 0 60px 0;
}
#lock:before {
  content: "";
  box-sizing: border-box;
  position: absolute;
  border: 25px solid red;
  width: 140px;
  height: 120px;
  left: 50%;
  margin-left: -70px;
  top: -120px;
  border-top-left-radius: 70px;
  border-top-right-radius: 70px;
}
#lock:after {
  content: "";
  box-sizing: border-box;
  position: absolute;
  border: 10px solid red;
  width: 50px;
  height: 80px;
  border-radius: 25px;
  left: 50%;
  top: -10px;
  margin-left: -25px;
}

19

指示器

<div id="pointer"></div>

#pointer {
  width: 200px;
  height: 40px;
  position: relative;
  background: red;
}
#pointer:after {
  content: "";
  position: absolute;
  left: 0;
  bottom: 0;
  width: 0;
  height: 0;
  border-left: 20px solid white;
  border-top: 20px solid transparent;
  border-bottom: 20px solid transparent;
}
#pointer:before {
  content: "";
  position: absolute;
  right: -20px;
  bottom: 0;
  width: 0;
  height: 0;
  border-left: 20px solid red;
  border-top: 20px solid transparent;
  border-bottom: 20px solid transparent;
}

20

月亮

<div id="moon"></div>

#moon {
  width: 80px;
  height: 80px;
  border-radius: 50%;
  box-shadow: 15px 15px 0 0 red;
}

該文章在 2024/3/29 23:31:23 編輯過

關(guān)鍵字查詢

相關(guān)文章

正在查詢...

點(diǎn)晴ERP是一款針對中小制造業(yè)的專業(yè)生產(chǎn)管理軟件系統(tǒng),系統(tǒng)成熟度和易用性得到了國內(nèi)大量中小企業(yè)的青睞。

點(diǎn)晴PMS碼頭管理系統(tǒng)主要針對港口碼頭集裝箱與散貨日常運(yùn)作、調(diào)度、堆場、車隊(duì)、財(cái)務(wù)費(fèi)用、相關(guān)報表等業(yè)務(wù)管理，結(jié)合碼頭的業(yè)務(wù)特點(diǎn)，圍繞調(diào)度、堆場作業(yè)而開發(fā)的。集技術(shù)的先進(jìn)性、管理的有效性于一體，是物流碼頭及其他港口類企業(yè)的高效ERP管理信息系統(tǒng)。

點(diǎn)晴WMS倉儲管理系統(tǒng)提供了貨物產(chǎn)品管理,銷售管理,采購管理,倉儲管理,倉庫管理,保質(zhì)期管理,貨位管理,庫位管理,生產(chǎn)管理,WMS管理系統(tǒng),標(biāo)簽打印,條形碼,二維碼管理,批號管理軟件。

點(diǎn)晴免費(fèi)OA是一款軟件和通用服務(wù)都免費(fèi)，不限功能、不限時間、不限用戶的免費(fèi)OA協(xié)同辦公管理系統(tǒng)。