如何用htmlCSS画出下面这两个形状？

Question

[尝试用 HTML 和 CSS 绘制这些形状][1]

我应该如何只使用 HTML 和 CSS 来绘制它们 [1]: https://i.stack.imgur.com/8mvdY.png

如果可能，请将工作代码发送给我

Answer 1

您可以使用彩色粗边框复制这些形状。

.shapes{
  box-sizing: border-box;
  width:100px;
  height:100px;
  border-top:red solid 30px;
  border-right:blue solid 30px;
  border-bottom:yellow solid 30px;
  border-left:green solid 30px;
}

.shapes-full-fill{
  box-sizing: border-box;
  width:100px;
  height:100px;
  border-top:red solid 50px;
  border-right:blue solid 50px;
  border-bottom:yellow solid 50px;
  border-left:green solid 50px;
}

<div class="shapes"></div>
<br>
<div class="shapes-full-fill"></div>

如何用htmlCSS画出下面这两个形状？

How do I draw these two shapes below with html CSS?

html

css

colors

shapes

square