Coloring half of a triangle in CSS

December 27, 2021

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>

Screenshot-CSS-battle

I prefer a simple answer because I’m new to CSS..

>Solution :

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