我怎样才能用 CSS 制作这个形状？ [复制]答案

【问题标题】：How can i make this shape with CSS? [duplicate]我怎样才能用 CSS 制作这个形状？ [复制]
【发布时间】：2020-11-09 18:49:42
【问题描述】：

.outer {
  background-color: #FFB4B4;
  padding: 40px;
  text-align: left;
}

&lt;div class="outer"&gt;&lt;h1&gt;Lorem Ipsum nkdsdkjdks diosudisuidus&lt;/h1&gt;&lt;p&gt;At vero eos et accusam et justo duo dolores et ea rebum. At vero eos et accusam et justo duo dolores et ea rebum. &lt;/p&gt;&lt;button&gt;test&lt;/button&gt;&lt;/div&gt;

如何在不使用额外插件或 javascript 或其他任何东西的情况下仅使用 CSS 制作此形状。它应该适用于所有主流浏览器，如 Chrome、Mozilla、Safari、IE。

注意：我不想使用 Shape Image。

【问题讨论】：

请添加您的代码以便我们为您提供帮助
添加了一些代码，但我不知道如何制作这个形状，所以在这里问。
这将帮助您了解。 HTML代码<body><div></div></body> CSS代码body {margin:0;}body {height: 100vh;background: linear-gradient(120deg, pink 65%, white 25%)}

标签： html css

【解决方案1】：

尽管这不是提问的最佳方式，但我想这就是你想要的。

HTML

<div class="shape"></div>

CSS

.shape {
  width: 80px;
  border-right: 50px solid transparent;
  border-top: 100px solid red;
}

这将创建您想要的形状，但如果您在 css 中快速搜索形状，您可以轻松获得此结果

【讨论】：