# 長得像among us中的impostor的專案 --- tags: HTML CSS relate --- ###### tags: `HTML, CSS` ![](https://i.imgur.com/JFvM6Qd.png) [作品連結](https://chiehLiu.github.io/git-projects/among/) 專案內容如下: 會利用一大堆的border-radius來操作各種圓弧的表面，以及各種定位方式來定位各個部位(腳 背包 眼鏡等等)。 這個網址是border-radius各種角度計算，當你拉好形狀之後把數值Po回來就可以瞜！ Fancy Border Radius Tool: https://9elements.github.io/fancy-border-radius/full-control.html ---- **head** 無特別之處 ```htmlembedded= <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <link rel="stylesheet" href="style.css"> <title>Among us</title> </head> ``` ---- **body** html: 用impostor包裹住整體，接下來就用部位名稱去命名各個部位 class="body" class="glass-bowl" class="legs" 等等 ```htmlembedded= <body> <div class="impostor"> <div class="floor-shadow"></div> <div class="backpack"> <div class="shadow"></div> </div> <div class="body"> <div class="fill"></div> <div class="shadow"></div> </div> <div class="glass-bowl"> <div class="reflection-blue"></div> <div class="reflection-white"></div> </div> <div class="legs"> <div class="leg-left"></div> <div class="leg-right"></div> </div> </div> </body> ``` css: 先把整個畫面設置成flex，並且全部置中滿版 ```css= body { /* 這個部分設定之後會讓整個body內的物件完全置中 */ display: flex; align-items: center; justify-content: center; height: 100vh; } ``` 這邊是讓各個部位做定位 ``` css= .impostor { /* 這邊是設定讓body跟一些配件像是背包安全帽 四肢等等做定位使用 */ position: relative; } ``` 這邊處理身體的外框，雛型就出來了~ ![](https://i.imgur.com/k861nUq.png) 下圖是還沒有使用overflow:hideen前的樣子 ![](https://i.imgur.com/yLhrvIX.png) ```css= .impostor .body { position: relative; width: 300px; height: 420px; /* 這個部分是他做出圓弧狀最重要的點 */ /* 四個數值表示四個角順時針走 從最左上角開始 */ border-radius: 35% 45% 0 0; border: 30px solid #000; /* 這邊使用overflow是因為紅色填充物超出外框了讓超出的部分隱藏 */ overflow: hidden; } ``` 這邊是要填進去身體的顏色寬度高都100%因為要填滿身體 ```css= .impostor .fill{ /* 這邊就會定位在父層也就是 .imposter .body上面 */ position: absolute; width: 100%; height: 100%; /* 這邊是陰影的顏色 */ background: #7B0236; } ``` 這邊填入身體上方比較亮的紅色，因為底部有一小部分是陰影處所以高度使用90% 下圖綠色框框處 ![](https://i.imgur.com/ywemmqs.png) ``` css= .impostor .body .shadow{ position: absolute; width: 100%; height: 90%; background: #c70a01; border-radius: 0% 10% 25% 40% / 20% 0% 100% 100%; } ``` --------------- 開始處理鏡片外框，因為要凸出去身體所以定位的right用負數，然後去除一些凸出去的部分一樣使用 overflow:hidden，最後加上一點旋轉。 ![](https://i.imgur.com/ON52djQ.png) ```css= .impostor .glass-bowl{ position: absolute; width: 200px; height: 130px; background: #4a646d; right: -20px; top: 90px; border: 30px solid #000; border-radius: 25% 45% 40% 40% / 50%; overflow: hidden; /* 讓鏡片旋轉一點點 */ transform: rotate(-4deg); } ``` 處理鏡片反光部分藍色 ```css= .impostor .glass-bowl .reflection-blue{ position: absolute; right: 0; width: 90%; height: 70px; background:#94c0db; border-radius: 10% 10% 100% 100% / 100% 100% 50% 100%; } ``` 處理鏡片反光部分白色 ```css= .impostor .glass-bowl .reflection-white{ position: absolute; right: 10%; top: 10px; width: 50%; height: 40px; background:#fff; border-radius: 30% 70% 30% 30% / 30% 70% 30% 60%; } ``` --------------- **legs的處理** 設定flex前的樣子 ![](https://i.imgur.com/k5gFwxZ.png) 設定之後的樣子 ![](https://i.imgur.com/LvmlSGY.png) ```css= .legs{ display: flex; /* 這邊最大的範圍就是body所以space between會在兩條腿之間產生一樣的空隙 */ justify-content: space-between; /* 這邊的transform Y的意思是移動Y軸 */ transform: translateY(-30px ); } ``` 左腿的部分比較單純簡單設定長寬，接下來設定外框即可 ![](https://i.imgur.com/2W1bwGr.png) ```css= .impostor .legs .leg-left{ width: 110px; height: 130px; background: #7B0236; border-left: 30px solid #000; border-right: 30px solid #000; border-bottom: 30px solid #000; border-radius: 0 0 40% 40%; } ``` 右腿比較複雜，因為這邊會跟胯下的陰影處有關聯，不過就多個定位也還好 ```css= .impostor .legs .leg-right{ /* 這邊是為了定位給胯下處使用當它的父層 */ position: relative; width: 90px; height: 105px; background: #7B0236; border-left: 30px solid #000; border-right: 30px solid #000; border-bottom: 30px solid #000; border-radius: 0 0 40% 40%; } /*胯下陰影處這邊使用偽類做疊層*/ .impostor .legs .leg-right:before{ content: ''; position: absolute; top: 0; left: -50px; width: 100px; height: 30px; background: #000; border-radius: 0 0 100% 0; } ``` --------------- **backpack的部分** 一樣有陰影跟亮紅色的部分，並且都是定位在body上面 ![](https://i.imgur.com/EEZPgpF.png) ```css= .impostor .backpack{ position: absolute; height: 280px; width: 80px; background: #c70a01; border: 30px solid #000; left: -90px; top: 130px; border-radius: 40% 0 0 40%/ 15%; } ``` 背包陰影處理 很方便直接高度跟寬直接用比例的方式去呈現因為她的div父層就是他要蓋過去的地方， 這邊的overflow:hidden用來讓稜角變成圓弧 ![](https://i.imgur.com/kRR8oyh.png) ![](https://i.imgur.com/vaA6Jdq.png) ```css= .impostor .backpack .shadow{ position: absolute; width: 100%; height: 85%; background: #7B0236; bottom: 0; overflow: hidden; border-radius: 40% 0 0 0/ 10% 0 0 0; } ``` 地板處陰影處理一樣定位在身體上面，設定顏色跟圓弧就比較直觀~ ```css= .impostor .floor-shadow{ position: absolute; bottom: 10px; left: -15%; width: 470px; height: 100px; background: #535858; border-radius: 50%; } ```