我想在不使用 Javascript 的情况下实现这样的自定义颜色形状：
目前，我正在将“框架”的图像覆盖在橙色矩形 div 上，但这很 hacky。我想我可以使用动态生成的画布元素，但这不仅需要 JS，还需要 HTML5 画布支持。有任何想法吗？
问问题
77660 次
9 回答
124
我最好的尝试：http ://dabblet.com/gist/4592062
任何尺寸的像素完美，使用比 Ana 原始解决方案更简单的数学运算，并且在我看来更直观 :)
.triangle {
position: relative;
background-color: orange;
text-align: left;
}
.triangle:before,
.triangle:after {
content: '';
position: absolute;
background-color: inherit;
}
.triangle,
.triangle:before,
.triangle:after {
width: 10em;
height: 10em;
border-top-right-radius: 30%;
}
.triangle {
transform: rotate(-60deg) skewX(-30deg) scale(1,.866);
}
.triangle:before {
transform: rotate(-135deg) skewX(-45deg) scale(1.414,.707) translate(0,-50%);
}
.triangle:after {
transform: rotate(135deg) skewY(-45deg) scale(.707,1.414) translate(50%);
}<div class="triangle"></div>于 2013-01-22T05:07:01.400 回答
30
dabblet 演示
.triangle, .triangle:before, .triangle:after { width: 4em; height: 4em; }
.triangle {
overflow: hidden;
position: relative;
margin: 7em auto 0;
border-radius: 20%;
transform: translateY(50%) rotate(30deg) skewY(30deg) scaleX(.866);
cursor: pointer;
pointer-events: none;
}
.triangle:before, .triangle:after {
position: absolute;
background: orange;
pointer-events: auto;
content: '';
}
.triangle:before {
border-radius: 20% 20% 20% 53%;
transform: scaleX(1.155) skewY(-30deg) rotate(-30deg) translateY(-42.3%)
skewX(30deg) scaleY(.866) translateX(-24%);
}
.triangle:after {
border-radius: 20% 20% 53% 20%;
transform: scaleX(1.155) skewY(-30deg) rotate(-30deg) translateY(-42.3%)
skewX(-30deg) scaleY(.866) translateX(24%);
}
/** extra styles to show how it works **/
.triangle:hover { overflow: visible; }
.triangle:hover:before, .triangle:hover:after { background: none; }
.triangle:hover, .triangle:hover:before, .triangle:hover:after {
border: dashed 1px;
}<div class='triangle'></div>.triangle这个想法非常简单：您首先对您的元素应用一系列变换（它具有overflow: hidden;- 您可以删除它以查看会发生什么；））以获得菱形。
然后你将相同的变换应用于:before和:after伪元素，再加上一些使它们也变成菱形。
最后，你有三个相交的菱形，橙色的形状是它们的交点。悬停三角形以查看相交的形状；）
它可以很好地缩放，您只需要更改元素的width和。height.triangle
对于 Firefox、Chrome 和 Safari，只有带圆角的橙色三角形对悬停敏感（感谢pointer-events: none;元素.triangle和pointer-events: auto;伪元素）。否则，这可以通过包装.triangle在具有相同width和height（以及相同border-radius）和的元素中来实现overflow: hidden;。
笔记
- 您也可以使用 CSS 渐变来实现。但是，与 2D 变换不同，CSS 渐变在 IE9 中不起作用。
- 我希望我不必取消从父级继承倾斜的伪元素，只是在旋转后再次倾斜它们，但它似乎不起作用。
于 2013-01-21T22:00:34.827 回答
10
使用某种图像。这就是图像的用途。如果您需要缩放，SVG 是一个不错的选择，否则，只需使用 png 作为背景，或者<img>如果它是内容的一部分，则使用元素。
如果您绝对必须将它放在 CSS 文件中，您可以尝试data: urls（IE7 及以下版本不支持）。
于 2013-01-21T20:32:15.647 回答
10
首先，我们使用创建三角形clip-path：
.triangle {
display: inline-block;
width: 150px;
color:orange;
}
.triangle::before {
content: "";
display: block;
padding-top: 86%;
background: currentColor;
clip-path: polygon(50% 0, 100% 100%, 0 100%);
}<div class="triangle"></div>然后我们应用受本文启发的 SVG 过滤器
.triangle {
display: inline-block;
width: 150px;
color:orange;
filter: url('#goo');
}
.triangle::before {
content: "";
display: block;
padding-top: 86%;
background: currentColor;
clip-path: polygon(50% 0, 100% 100%, 0 100%);
}<div class="triangle"></div>
<div class="triangle" style="color:red;width:200px;"></div>
<div class="triangle" style="color:blue;width:250px;"></div>
<svg style="visibility: hidden; position: absolute;" width="0" height="0" xmlns="http://www.w3.org/2000/svg" version="1.1">
<defs>
<filter id="goo"><feGaussianBlur in="SourceGraphic" stdDeviation="8" result="blur" />
<feColorMatrix in="blur" mode="matrix" values="1 0 0 0 0 0 1 0 0 0 0 0 1 0 0 0 0 0 19 -9" result="goo" />
<feComposite in="SourceGraphic" in2="goo" operator="atop"/>
</filter>
</defs>
</svg>
要控制半径，我们只需调整stdDeviation过滤器的
考虑到这一点，您可以使其与任何类型的三角形甚至随机形状一起使用：
.triangle {
display: inline-block;
width: 150px;
color:orange;
filter: url('#goo');
}
.triangle::before {
content: "";
display: block;
padding-top: 86%;
background: currentColor;
clip-path: polygon(50% 0, 100% 100%, 0 100%);
}
.triangle.type2::before {
padding-top: 70%;
clip-path: polygon(0 0, 100% 100%, 0 100%);
}
.triangle.type3::before {
padding-top: 100%;
clip-path: polygon(50% 0, 80% 100%, 0 70%);
}
.triangle.hex::before {
padding-top: 100%;
clip-path: polygon(25% 0%, 75% 0%, 100% 50%, 75% 100%, 25% 100%, 0% 50%);
}<div class="triangle"></div>
<div class="triangle type2" style="color:red;"></div>
<div class="triangle type3" style="color:blue;"></div>
<div class="triangle hex" style="color:purple;"></div>
<svg style="visibility: hidden; position: absolute;" width="0" height="0" xmlns="http://www.w3.org/2000/svg" version="1.1">
<defs>
<filter id="goo"><feGaussianBlur in="SourceGraphic" stdDeviation="8" result="blur" />
<feColorMatrix in="blur" mode="matrix" values="1 0 0 0 0 0 1 0 0 0 0 0 1 0 0 0 0 0 19 -9" result="goo" />
<feComposite in="SourceGraphic" in2="goo" operator="atop"/>
</filter>
</defs>
</svg>
值得注意的是，我们可以轻松地为形状添加复杂的背景：
.triangle {
display: inline-block;
width: 150px;
filter: url('#goo');
}
.triangle::before {
content: "";
display: block;
padding-top: 86%;
background: var(--b,orange);
clip-path: polygon(50% 0, 100% 100%, 0 100%);
}
.triangle.type2::before {
padding-top: 70%;
clip-path: polygon(0 0, 100% 100%, 0 100%);
}
.triangle.type3::before {
padding-top: 100%;
clip-path: polygon(50% 0, 80% 100%, 0 70%);
}
.triangle.hex::before {
padding-top: 100%;
clip-path: polygon(25% 0%, 75% 0%, 100% 50%, 75% 100%, 25% 100%, 0% 50%);
}<div class="triangle"></div>
<div class="triangle type2" style="--b:linear-gradient(red,blue);"></div>
<div class="triangle type3" style="--b:conic-gradient(green,pink,green);"></div>
<div class="triangle hex" style="--b:url(https://picsum.photos/id/1067/200/200) center/cover;"></div>
<svg style="visibility: hidden; position: absolute;" width="0" height="0" xmlns="http://www.w3.org/2000/svg" version="1.1">
<defs>
<filter id="goo"><feGaussianBlur in="SourceGraphic" stdDeviation="8" result="blur" />
<feColorMatrix in="blur" mode="matrix" values="1 0 0 0 0 0 1 0 0 0 0 0 1 0 0 0 0 0 19 -9" result="goo" />
<feComposite in="SourceGraphic" in2="goo" operator="atop"/>
</filter>
</defs>
</svg>
于 2020-12-28T23:36:03.857 回答
6
安娜的回答启发我尝试另一种方法，这种方法远非完美，但至少是对称的。这是真实尺寸的预览并被放大。它只是一个包裹在剪裁圆/边框半径中的边框黑客三角形：
font-size和代码（通过单个属性调整整体大小）：
.triangle {
font-size: .8em;
position: relative;
width: 3.8em;
height: 3.8em;
text-align: center;
margin: 10% auto 0;
overflow: hidden;
border-radius: 100%;
}
.triangle:before {
content: '';
position: absolute;
width:0;
height: 0;
border: solid 2em transparent;
border-bottom-color: orange;
border-bottom-width: 3.2em;
border-top-width: 0;
margin: -.3em -2em;
}
在这里玩它：http: //dabblet.com/gist/4590714
于 2013-01-22T03:48:33.137 回答
4
玩了 Murray Smiths 最受好评的版本。将其编写为 Stylus mixin 并修复了一些边距问题并添加了方向选项。mixin 还将三角形缩放到像素完美的大小。没有很好地测试。小心使用
http://codepen.io/perlundgren/pen/VYGdwX
triangle(direction = up, color = #333, size = 32px)
position: relative
background-color: color
width: 2*(round(size/3.25))
height: 2*(round(size/3.25))
border-top-right-radius: 30%
&:before,
&:after
content: ''
position: absolute
background-color: inherit
width: 2*(round(size/3.25))
height: 2*(round(size/3.25))
border-top-right-radius: 30%
if direction is up
transform: rotate(-60deg) skewX(-30deg) scale(1,.866)
margin: (@width/4) (@width/2.5) (@width/1.2) (@width/2.5)
if direction is down
transform: rotate(-120deg) skewX(-30deg) scale(1,.866)
margin: 0 (@width/1.5) (@width/1.5) (@width/6)
if direction is left
transform: rotate(-30deg) skewX(-30deg) scale(1,.866)
margin: (@width/5) 0 (@width) (@width/1.4)
if direction is right
transform: rotate(-90deg) skewX(-30deg) scale(1,.866)
margin: (@width/5) (@width/1.4) (@width) 0
&:before
transform: rotate(-135deg) skewX(-45deg) scale(1.414,.707) translate(0,-50%)
&:after
transform: rotate(135deg) skewY(-45deg) scale(.707,1.414) translate(50%)
然后只需将mixin添加到您的课程中
.triangle
&.up
triangle()
&.down
triangle(down)
&.left
triangle(left)
&.right
triangle(right)
于 2015-03-09T14:16:07.627 回答
2
-- 简化版 --
在我的情况下，我需要文本伴随三个圆角的三角形图标，但是overflow: hidden;建议根本不起作用，因为文本最终被隐藏了。
最终结果：
...演示：https ://jsfiddle.net/allenski/7p4tbznr/
我能够通过使用来实现类似的面具clip-path。注意：在 IE 中不起作用；但是大多数已经停止支持 IE，尤其是在微软这样做之后。在他们的新 Edge 浏览器中运行良好。
HTML：
<span class="warning">
Mandatory
</span>
CSS：
.warning {
position: relative;
display: inline-block;
font-weight: bold;
color: #FF5500;
}
.warning:before {
position: absolute;
top: 50%;
right: 12px;
font-size: 18px;
font-weight: bold;
color: #FFFFFF;
transform: translateY(-36%);
text-shadow: 0 0 7px #111111;
z-index: 1;
content: '!';
}
.warning:after {
display: inline-block;
margin-left: 3px;
font-size: 5px;
border: solid 3em transparent;
border-top-width: 0;
border-bottom-width: 5em;
border-bottom-color: #FF5500;
clip-path: circle(54% at 50% 69%);
vertical-align: bottom;
content: '';
}
在 CSS 中，三角形是:after伪元素。
于 2020-10-26T00:46:13.080 回答
1
我看到有人要求等腰三角形，并且通过篡改上面接受的答案，我发现了如何操纵它来获得我想要的东西，因为我需要同样的东西。这应该有助于任何寻找圆角三角形略有变化的人。
您会注意到我将宽度、高度和边框右上角半径分开，然后继续更改边框右上角半径以塑造角。我唯一更改的另一件事是直接在元素上的 transform 属性。你可以按照你认为合适的方式塑造它，但这些似乎是唯一必要的改变。
.diff-arrow {
margin-left:30px;
position: relative;
background-color: #20C0F1;
text-align: left;
width: 10em;
height: 10em;
border-top-right-radius: 20%;
}
.diff-arrow:before,
.diff-arrow:after {
content: '';
position: absolute;
background-color: inherit;
width: 10em;
height: 10em;
border-top-right-radius: 15%;
}
.diff-arrow {
transform: rotate(-45deg) skewX(0deg) scale(0.5);
}
.diff-arrow:before {
transform: rotate(-135deg) skewX(-45deg) scale(1.414, .707) translate(0, -50%);
}
.diff-arrow:after {
transform: rotate(135deg) skewY(-45deg) scale(.707, 1.414) translate(50%);
}<div class="diff-arrow"></div>于 2019-07-09T20:18:46.843 回答
0
从典型的边界三角形开始，然后向三角形添加 svg 过滤器。
.c-paper-plane {
position: relative;
}
.scene {
transform-style: preserve-3d;
transform: rotate3d(0.2, -1, -0.8, -177deg);
}
svg.paper-plane {
transform: rotateX(0) translateZ(-3px);
transform-origin: center;
}
.paper-tail {
transform: rotateX(0deg) translate(31px, 10px) translateZ(-5px);
transform-origin: center;
fill: grey;
}
.paper-tail-div {
transform: rotateX(269deg) translate(237px, 55px) translateZ(139px);
fill: grey;
transform-origin: center;
position: absolute;
top: 0;
width: 0;
height: 0;
border-top: 100px solid red;
border-right: 150px solid transparent;
filter: url('#goo');
}<div class="c-paper-plane">
<div class="scene">
<svg id="paper-plane" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 139.549 79.269">
<defs>
<filter id="goo"><feGaussianBlur in="SourceGraphic" stdDeviation="8" result="blur" />
<feColorMatrix in="blur" mode="matrix" values="1 0 0 0 0 0 1 0 0 0 0 0 1 0 0 0 0 0 19 -9" result="goo" />
<feComposite in="SourceGraphic" in2="goo" operator="atop"/>
</filter>
</defs>
<g class="plane-group">
<path class="paper-wing" d="M47.377,76.654V47.025c0-1.137,0.871-2.084,2.003-2.178l60.357-5.062c0.2-0.01,0.2-0.29,0-0.31l-60.356-5.052
c-1.133-0.095-2.004-1.042-2.004-2.179V2.615c0-1.878,1.922-3.142,3.646-2.399l87.37,37.662c1.54,0.664,1.54,2.848,0,3.512
l-87.37,37.662C49.299,79.796,47.377,78.531,47.377,76.654z"/>
</g>
</svg>
<div class="paper-tail-div"></div>
</div>
</div>于 2021-04-02T15:49:01.410 回答