如何使用兼容浏览器的 CSS 在 HTML 中创建形状

Question

我想像这样使用 CSS 在 HTML 中创建一个形状

如何使用 CSS 在 HTML 中创建此形状。任何最佳解决方案。谢谢

Answer 1

您可以使用 CSS 剪辑路径：

.yourclass {
  width: 200px;
  height: 200px;
  background-color: orange; 
  -webkit-clip-path: polygon(20% 0%, 60% 0, 0 60%, 0 20%);
  clip-path: polygon(20% 0%, 60% 0, 0 60%, 0 20%);
}

<div class="yourclass"></div>

在 Clippy 上试用它。

如何使用兼容浏览器的 CSS 在 HTML 中创建形状

How to create shape in HTML using CSS with browser compatibility

html

css

shape