我需要用图片中的黑色填充三角形的上半部分(#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 新手。