html – 是否可以用CSS制作圆角三角形?

前端之家收集整理的这篇文章主要介绍了html – 是否可以用CSS制作圆角三角形?前端之家小编觉得挺不错的,现在分享给大家,也给大家做个参考。
我想用CSS制作以下形状:

这是我目前拥有的:

.triangle {
  width: 0;
  height: 0;
  border-style: solid;
  border-width: 56px 56px 0 0;
  border-color: #ff4369 transparent transparent transparent;
}
<div class="triangle">
</div>

我无法使用边框半径使左上角变圆……有没有其他方法可以做到这一点还是我需要使用SVG?

解决方法

要实际回答你的问题(并提供没有border-radius的第一个答案):如果你想要一个只有CSS的解决方案,你将不得不使用border-radius.

尽管如此,我强烈建议使用SVG来创建形状,因为像这样的简单形状很容易手动创建,它具有响应性,它是widely supported now和(在评论中提到的@chharvey)在语义上更合适.

<svg viewBox="0 0 50 50" height="56px">
  <path d="M1 50 V10 Q1 1 10 1 H50z" fill="#ff4369" />
</svg>

您可以找到有关路径属性in the specs的更多信息.

原文链接:https://www.f2er.com/html/226569.html

猜你在找的HTML相关文章