在 Css3 中绘制特殊形状答案

【问题标题】：Draw special shapes in Css3在 Css3 中绘制特殊形状
【发布时间】：2022-11-22 13:39:17
【问题描述】：

我正在寻找一种使用 Css3 绘制图片中的特殊形状的方法。使用 Css3 绘制该形状的任何想法或绘图方法？

我已经参考了几种方法，但它只是绘制成一个普通的三角形。

<div id="shape"></div>

#shape{
    width: 0;
    height: 0;
    border-left: 72px solid transparent;
    border-right: 0px solid transparent;
    border-bottom: 72px solid red;    
}

【问题讨论】：

标签： html css

【解决方案1】：

可以使用形状上的后元素来完成

我做了一个代码笔：[https://codepen.io/junaidcody/pen/eYKVWxB][1]

【讨论】：

【解决方案2】：

您可以在 #shape css 中添加 border-bottom-right-radius: 10px;。但是，您可以将 border-left 设置为白色，或者根据您的 div 背景颜色来匹配颜色

#shape {
    width: 0;
    border-left: 72px solid white;
    border-right: 0px solid;
    border-bottom: 72px solid red;
    border-bottom-right-radius: 10px;
}

&lt;div id="shape"&gt;&lt;/div&gt;

【讨论】：

【解决方案3】：

在 CSS 中使用 clip-path 属性并在图像中制作形状。您可以在 w3Schools 中阅读有关剪辑路径的信息。这是一个参考链接https://www.w3schools.com/CSSREF/css3_pr_clip-path.php

有更多资源，我建议阅读有关多边形的内容。

【讨论】：

【解决方案4】：

尝试https://bennettfeely.com/clippy/（这是一个在线剪辑路径制作网站）和边框半径。如果还是不行，告诉我，我会解释给你听的。但先试一试。顺便说一句，您将无法绘制外部蓝色边框。

【讨论】：

不鼓励仅链接的答案，因为它们可能会过时（即断开的链接），从而使答案不完整（因此无法使用）-请阅读我们的How to Answer页面以获取有关如何改进此答案的提示
@blurfus 现在好了吗？谢谢你的建议