在 CSS 中為三角形的一半着色
[英]Coloring half of a triangle in CSS
問題描述
我需要用圖片中的黑色填充三角形的上半部分（ #d3是三角形 div）：
這是 HTML 代碼：
#d1 { background: #191919; height: 300px; width: 400px; display: grid; place-content: center; position: relative; } #d2 { background: #F9E492; height: 200px; width: 200px; border-radius: 100%; } #d3 { width: 0; height: 0; border-left: 150px solid transparent; border-right: 150px solid transparent; border-bottom: 150px solid #4F77FF; position: absolute; bottom: 0px; left: 50px; }
<html lang="en"> <head> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <link rel="stylesheet" type="text/css" href="style.css"> <title>CSSBATTLE</title> </head> <body> <div id="d1"> <div id="d2"> <div id="d3"></div> </div> </div> </body> </html>
我更喜歡一個簡單的答案，因為我是 CSS 的新手。
2 個解決方案
解決方案1
1 已采納 2021-12-27 13:14:11
您可以使用::after選擇器並將其定位為絕對，使其邊框底部半徑為 50%。
#d1 { background: #191919; height: 300px; width: 400px; display: grid; place-content: center; position: relative; } #d2 { background: #F9E492; height: 200px; width: 200px; border-radius: 100%; } #d3 { width: 0; height: 0; border-left: 150px solid transparent; border-right: 150px solid transparent; border-bottom: 150px solid #4F77FF; position: absolute; bottom: 0px; left: 50px; } #d3::after { content: ""; width: 0; height: 0; border-left: 89px solid transparent; border-right: 89px solid transparent; border-bottom: 89px solid #000; border-bottom-left-radius: 50%; border-bottom-right-radius: 50%; position: absolute; bottom: -89px; left: 50%; transform: translateX(-50%) }
<html lang="en"> <head> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <link rel="stylesheet" type="text/css" href="style.css"> <title>CSSBATTLE</title> </head> <body> <div id="d1"> <div id="d2"> <div id="d3"></div> </div> </div> </body> </html>
注意我使用像素來定位三角形，但我建議您使用 % 或任何其他非像素單位
解決方案2
0 2021-12-27 13:46:04
#d1 { background: #191919; height: 300px; width: 400px; display: grid; place-content: center; position: relative; } #d2 { background: #F9E492; height: 200px; width: 200px; border-radius: 100%; } #d3 { height:150px; width:300px; position: absolute; bottom: 0px; left: 50px; background:#4F77FF; clip-path: polygon(50% 0%, 0% 100%, 100% 100%); } #d4{ height:100px; background:#000000; } <html lang="en"> <head> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <link rel="stylesheet" type="text/css" href="style.css"> <title>CSSBATTLE</title> </head> <body> <div id="d1"> <div id="d2"> <div id="d3"> <div id="d4"></div> </div> </div> </div> </body> </html>
#d1{ height:200px; width:200px; background:red; clip-path: polygon(50% 0%, 0% 100%, 100% 100%); } #d2{ height:100px; background:#000000; }
<!DOCTYPE html> <html> <head> <title>Triangle top black</title> </head> <body> <div id="d1"> <div id="d2"></div> </div> </body> </html>
着色CSS半圓
聲明:本站的技術帖子網頁，遵循CC BY-SA 4.0協議，如果您需要轉載，請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.