0

我试图把这个圆圈放在三角形的中心。我将类三角形设置为显示 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>

4

4 回答 4

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 小提琴演示。

当然，如果您准备使用 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 小提琴演示。

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

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

参考：

参考书目：

于 2022-02-26T17:55:57.577 回答
1

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

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

于 2022-02-26T22:14:18.230 回答
0

您必须在 css 中为您的 circle 类设置 top、right、left、bottom。例如：

 .circle {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%,-50%) //optional
width: 200px;
height: 200px;
border-radius: 50%;
background: blue;
}
于 2022-02-26T16:25:10.413 回答
0 

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>

于 2022-02-26T17:46:24.433 回答