css如何在三角形内画一个圆

Question

我试图将这个圆圈放在三角形的中心。我将类三角形设置为显示 Flex，但它不起作用。请帮我。

代码：

body {
  display: flex;
  align-items: center;
  justify-content: center;
}

.triangle {
  position: relative;
  width: 0;
  height: 0;
  border-left: 300px solid transparent;
  border-right: 300px solid transparent;
  border-bottom: 300px solid black;
}

.circle {
  position: absolute;
  width: 200px;
  height: 200px;
  border-radius: 50%;
  background: blue;
}

<div class="triangle">
  <div class="circle">

  </div>
</div>

Answer 1

实现此目的的最简单的方法之一（非 SVG）如下所示，并在代码中附有解释性注释：

.collage {
  /* using grid layout means we can easily
     position the elements in the same place
     without nesting them: */
  display: grid;
  /* effectively the same as:
       justify-content: center;
       align-contents: center;
     to place the items in the center along
     the block and inline axes: */
  place-items: center;
}

.triangle {
  /* allows us to set the aspect-ratio, which causes
     the browser to compute one axis of the element
     based on the value we specify for 'other' axis;
     here we specify a height of 300px, so the browser
     calculates the other axis to 600px, making the
     triangle-shape twice as wide as its height: */
  aspect-ratio: 2 / 1;
  background-color: #000;
  /* using clip-path, with the CSS polygon() function,
     to specify a list of coordinates outside of which
     the element is clipped, instead of using the
     border hack to create a triangle: */
  clip-path: polygon(50% 0, 100% 100%, 0 100%);
  /* positions the element in the first grid-row
     and first grid-column: */
  grid-area: 1 / 1;
  height: 300px;
  z-index: 1;
}

.circle {
  /* a shorthand for an aspect-ratio of: 1 / 1,
     which causes the browser to calculate the
     unknown axis to be same length as the
     specified axis (again, the height): */
  aspect-ratio: 1;
  background-color: #00f;
  border-radius: 50%;
  grid-area: 1 / 1;
  height: 210px;
  /* to place the element higher in the visual
     stack, 'closer' to the viewer: */
  z-index: 10;
}

<div class="collage">
  <div class="triangle"></div>
  <div class="circle"></div>
</div>

JS Fiddle 演示。

当然，如果您准备使用 SVG：

<svg xmlns="http://www.w3.org/2000/svg" width="600" height="600" xml:space="preserve">
  <!-- this element is the background upon which
       the triangle and circle appear: -->
  <rect id="background"
        <!-- we fill the shape with black, the 'fill'
             being the 'background-color' -->
        style="fill: #fff;"
        <!-- these attributes determine the placement of
             the element, the x and y coordinates
             of the upper-left corner: -->
        x="-300" y="-300"
        <!-- determines the width and height: -->
        width="600" height="600"
        <!-- moves the element across the SVG, in the
             x and y axes: -->
        transform="translate(300 300)" />
  <path id="triangle"
        style="fill: #000;"
        <!-- this is the path of the triangle, the enclosed
             space being the filled portion: -->
        d="M-37.43 32.41 0-32.41l37.43 64.82z"
        transform="matrix(7.36 0 0 4.99 300 300)" />
  <circle id="circle"
          style="fill: #00f;"
          <!-- we specify the radius of the <circle>: -->
          r="35"
          <!-- and move it within the SVG for positioning: -->
          transform="matrix(3.01 0 0 3.01 300 300)" />
</svg>

JS Fiddle 演示。

SVG 解释起来有点复杂，所以不幸的是，我基本上放弃了这一责任，并在下面的参考书目中留下了一个链接，您（和其他人）可以从中了解更多信息。

还值得一提的是，我自己对 SVG 的了解是有限的，我倾向于使用程序来创建它们，例如 InkScape（当然也可以使用其他程序）或在线生成器，就像我在这里所做的那样。

参考文献：

• align-contents。
• 宽高比 。
• 背景颜色 。
• clip-path 。
• 显示。
• 网格区域 。
• 高度。
• justify-content 。
• 地点项目 。
• 。
• SVG 元素参考。
• z-index 。

参考书目：

• “网格完整指南”、CSS-Tricks 。
• “CSS 网格布局，”Mozilla 开发者网络。
• “SVG 教程，”Mozilla 开发者网络。

Answer 2

您可以考虑使用一个元素来绘制两种形状：

.box {
  width: 400px;
  aspect-ratio: 2;
  clip-path: polygon(50% 0, 100% 100%, 0 100%);
  background: radial-gradient(17% 34% at 50% 60%, blue 98%,#000); /* 34 = 17*2 */
}

<div class="box"></div>

Answer 3

您必须在 css 中为您的圆类设置顶部、右侧、左侧、底部。
例如：

 .circle {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%,-50%) //optional
width: 200px;
height: 200px;
border-radius: 50%;
background: blue;
}

Answer 4

body {
  display: flex;
  align-items: center;
  justify-content: center;
}

.triangle {
  position: relative;
  width: 0;
  height: 0;
  border-left: 300px solid transparent;
  border-right: 300px solid transparent;
  border-bottom: 300px solid black;
}

.circle {
  width: 200px;
  height: 200px;
  border-radius: 50%;
  background: blue;
  position: absolute;
  top: 75px;
  right : 50%;
  transform: translateX(50%);
}

<div class="triangle">
  <div class="circle">

  </div>
</div>