I need to fill the top-half of the triangle with black like in the picture (#d3 is the triangle div):
Here's HTML code:
#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>
I prefer a simple answer because I'm new to CSS..
CodePudding user response:
You can use ::after
selector and positioning it absolute, making it's borders bottom radius at 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>
N.B. I used pixel for positioning the triangle but I'll suggest you to use % or any other non-pixels unit
CodePudding user response:
#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>