css直角三角形的圆角

Question

我正在h1元素之前创建一个小的程式化三角形图案，但是我无法正确地将角弄圆。右上角很好，但是其他两个都有裁剪问题。

以下是输出以及形状爆炸的图像：

使用的代码如下：

h1:before {
  content: "";
  display: inline-block;
  width: 0.7em;
  height: 0.7em;
  margin-right: 10px;
  clip-path: polygon(100% 0%, 100% 100%, 0% 0%);
  -webkit-clip-path: polygon(100% 0%, 100% 100%, 0% 0%);
  background-color:  #34495e;
  border-radius: 0.12em;
}

<h1>Heading</h1>

我希望所有角都圆滑且没有任何尖角。也许有更好的方法可以做到这一点。也欢迎任何其他改善此技巧的提示。

Answer 1

那是因为要舍入整个节点。仅将border-radius应用于右上角

h1:before {
  content: "";
  display: inline-block;
  width: 0.7em;
  height: 0.7em;
  margin-right: 10px;
  clip-path: polygon(100% 0%, 100% 100%, 0% 0%);
  -webkit-clip-path: polygon(100% 0%, 100% 100%, 0% 0%);
  background-color:  #34495e;
  border-radius: 0 0.12em 0 0;
}

<h1>Heading</h1>

Answer 2

这里是一个想法，您可以依靠2个伪元素和一些背景色来近似它。您只需要找到正确的值即可在两个伪元素之间实现完美的重叠。

h1 {
  padding-left:1em;
  position:relative;
}

h1:before {
  content: "";
  position:absolute;
  left: 0;
  top: calc(50% - 0.35em);
  width: 0.7em;
  height: 0.7em;
  background: linear-gradient(to bottom left, #34495e 50%, transparent 50%);
  border-radius: 0.1em;
}
h1:after {
  content: "";
    position: absolute;
    left: 3.8px;
    top: -0.1px;
    width: 0.92em;
    height: 0.8em;
    margin-right: 10px;
    background: linear-gradient(to top,#34495e 3.5px,transparent 5px);
    border-radius: 0.1em;
    transform: rotate(45deg);
    z-index: -1;
}

<h1>Heading</h1>

Answer 3

您可以通过添加以下内容来为CSS中的每个角添加其他样式：

border-radius: 0.4em 0.1em 0.4em 0.1em

您可以更改这些数字以适合您的需求。我相信，第一个和第三个（我在旁边添加了0.4em的字符）控制着您要寻找的角。

Answer 4

除了SVG或在clip-path中手动构造曲线之外，您还可以添加:after元素作为弯曲的斜边。为了确定尺寸和放置位置，它里面有很多魔术数字，所以我不确定它的可扩展性如何，但是在这种情况下，至少可以让您使用CSS。

h1 {
position: relative;
}

h1:before {
  content: "";
  display: inline-block;
  width: 0.7em;
  height: 0.7em;
  margin-right: 10px;
  clip-path: polygon(100% 0%, 100% 100%, 0% 0%);
  -webkit-clip-path: polygon(100% 0%, 100% 100%, 0% 0%);
  background-color:  #34495e;
  border-radius: 0.12em;
}

h1:after {
  content: "";
  display: inline-block;
  position: absolute;
  left: .24em;
  top: .123em;
  
  width: 0.2em;
  height: 0.87em;
  background-color:  #34495e;
  border-radius: 0.12em;
  transform: rotate(-45deg);
  transform-origin: center;
}

<h1>Heading</h1>