有没有办法将矩形、Eliipse、文本等组合在一起使用？

<div class="rectangle"></div>
<div class="ellipse"></div>

.rectangle {
  width: 200px;
  height: 100px;
  background-color: #ff0000;
}

.ellipse {
  width: 200px;
  height: 100px;
  background-color: #00ff00;
  border-radius: 50%;
}

<div class="rectangle">
  <p>This is a rectangle</p>
</div>

<div class="ellipse">
  <p>This is an ellipse</p>
</div>

var rectangle = document.querySelector('.rectangle');
var ellipse = document.querySelector('.ellipse');

// 移动矩形和椭圆
rectangle.style.transform = 'translate(100px, 100px)';
ellipse.style.transform = 'translate(200px, 200px)';

// 缩放矩形和椭圆
rectangle.style.transform = 'scale(2)';
ellipse.style.transform = 'scale(0.5)';

// 旋转矩形和椭圆
rectangle.style.transform = 'rotate(45deg)';
ellipse.style.transform = 'rotate(-30deg)';