css 直角三角形的圆角
css rounded corner of right angled triangle
我正在创建一个小的程式化三角形图案 'before' 我的 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>
我希望所有的角都平滑圆润,没有任何尖角。也许有更好的方法来做到这一点。也欢迎任何其他改善这一点的技巧。
那是因为你对整个节点进行了舍入。仅将 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>
您可以为 CSS 中的每个角添加额外的样式,方法是添加:
border-radius: 0.4em 0.1em 0.4em 0.1em
您可以根据需要更改这些数字。我相信第一个和第三个(我在旁边添加了 0.4em 的那些)控制着你正在寻找的角落。
除了 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>
这是一个想法,您可以依靠 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>
我正在创建一个小的程式化三角形图案 'before' 我的 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>
我希望所有的角都平滑圆润,没有任何尖角。也许有更好的方法来做到这一点。也欢迎任何其他改善这一点的技巧。
那是因为你对整个节点进行了舍入。仅将 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>
您可以为 CSS 中的每个角添加额外的样式,方法是添加:
border-radius: 0.4em 0.1em 0.4em 0.1em
您可以根据需要更改这些数字。我相信第一个和第三个(我在旁边添加了 0.4em 的那些)控制着你正在寻找的角落。
除了 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>
这是一个想法,您可以依靠 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>