狠狠色丁香婷婷综合尤物/久久精品综合一区二区三区/中国有色金属学报/国产日韩欧美在线观看 - 国产一区二区三区四区五区tv

LOGO OA教程 ERP教程 模切知識交流 PMS教程 CRM教程 開發文檔 其他文檔  
 
網站管理員

【HTML】CSS奇思妙想之利用偽元素實現常見圖形：三角形、多邊形、紅心、箭頭、會話泡泡等
admin
2024年3月29日 23:31 本文熱度 734

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



01

橢圓

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

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

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



02

上、下、左、右三角形

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

<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 編輯過
關鍵字查詢
相關文章
正在查詢...
點晴ERP是一款針對中小制造業的專業生產管理軟件系統,系統成熟度和易用性得到了國內大量中小企業的青睞。
點晴PMS碼頭管理系統主要針對港口碼頭集裝箱與散貨日常運作、調度、堆場、車隊、財務費用、相關報表等業務管理，結合碼頭的業務特點，圍繞調度、堆場作業而開發的。集技術的先進性、管理的有效性于一體，是物流碼頭及其他港口類企業的高效ERP管理信息系統。
點晴WMS倉儲管理系統提供了貨物產品管理,銷售管理,采購管理,倉儲管理,倉庫管理,保質期管理,貨位管理,庫位管理,生產管理,WMS管理系統,標簽打印,條形碼,二維碼管理,批號管理軟件。
點晴免費OA是一款軟件和通用服務都免費，不限功能、不限時間、不限用戶的免費OA協同辦公管理系統。
Copyright 2010-2025 ClickSun All Rights Reserved