在 CSS 中为三角形的一半着色答案

【问题标题】：Coloring half of a triangle in CSS在 CSS 中为三角形的一半着色
【发布时间】：2022-01-26 10:36:00
【问题描述】：

我需要用黑色填充三角形的上半部分，如图所示（#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>

Screenshot-CSS-battle

我更喜欢简单的答案，因为我是 CSS 新手..

【问题讨论】：

标签： html css triangle

【解决方案1】：

您可以使用::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】：

  #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>

【讨论】：

解决方案和需求不匹配
正如目前所写，您的答案尚不清楚。请edit 添加其他详细信息，以帮助其他人了解这如何解决所提出的问题。你可以找到更多关于如何写好答案的信息in the help center。