如何在不使用 SVG 图像的情况下使用带有文本的 React 创建圆形/方形形状？

Question

使用 React 创建圆形和方形形状的方法是什么，它们可以在其中包含自定义文本而不使用 SVG 图像？ 一个例子：

我尝试了以下代码，但它没有呈现任何形状：

import React from 'react';

export default function Circle(){
  return(
    <div height="110" width="500">
      <circle
        cx="50"
        cy="55"
        r="45"
        fill="none"
        stroke="#F0CE01"
        strokeWidth="4"
      />
    </div>
  );
 }

Answer 1

您甚至可以使用div标签来做到这一点。 只需添加border-radius即可创建一个圆。

反应示例： https : //codesandbox.io/s/shapes-qbf1f

这是一个快速概述的片段：

 .square { display: flex; width: 100px; height: 100px; background-color: red; } .circle { display: flex; width: 100px; height: 100px; background-color: green; border-radius: 50%; } .text { margin: auto; }

 <div class="square"> <p class="text">Square text</p> </div> <div class="circle"> <p class="text">Circle text</p> </div>