如何在CSS中制作3角圆角三角形
Mur*_*ith 37 css css3 css-shapes
我想使用没有Javascript来实现这样的自定义颜色形状:
目前我在橙色矩形div上覆盖了"框架"的图像,但这非常黑客.我想我可以使用动态生成的canvas元素,但这不仅需要JS,还需要HTML5 canvas支持.有任何想法吗？
Mur*_*ith 96
我最好的尝试: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>- 等腰三角形向左指向怎么样？成为最大的右侧。 (3认同)
Ana*_*Ana 28
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;.
笔记
使用某种形象.这就是图像的用途.如果你需要它来扩展,SVG是一个不错的选择,否则,只需使用png作为背景,或者<img>如果它是内容的一部分则使用元素.
如果你绝对必须在CSS文件中使用它,你可以尝试data:urls(IE7及以下版本不支持).
首先，我们使用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>
安娜的答案激发了我尝试另一种方法的方法，该方法远非完美，但至少是对称的。这是真实尺寸的预览图，而且很破烂。这只是一个包裹在剪切圆/边界半径中的边界黑客缠结：
和代码（通过单个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
- 惊人的！因为 :after 可用于感叹号！制作一个警告图标！ (2认同)
小智 5
与Murray Smiths最受好评的版本一起玩。将其写为Stylus 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)
| 归档时间： |
|
| 查看次数： |
49909 次 |
| 最近记录： |