如何在CSS中制作3角圆角三角形

时间：2013-01-21 20:29:19

标签： css css3 css-shapes

我想使用不使用Javascript来实现这样的自定义颜色形状： 3 corner rounded triangle

目前我在橙色矩形div上覆盖了“框架”的图像，但这非常黑客。 我想我可以使用动态生成的canvas元素，但这不仅需要JS，还需要HTML5 canvas支持。有什么想法吗？

9 个答案:

答案 0 :(得分：87)

我最好的尝试：http://dabblet.com/gist/4592062 final

任何尺寸的像素完美，使用比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>

答案 1 :(得分：24)

dabblet demo 

.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渐变来完成它。但是，unlike 2D transforms，CSS渐变won't work in IE9。
  • 我希望我不必疏忽从父母那里继承偏斜的伪元素，只是在旋转之后再次将它们倾斜，但它似乎不起作用。

答案 2 :(得分：8)

使用某种形象。这就是图像的用途。如果您需要缩放SVG is a good choice，否则，只需使用png作为背景，或<img>元素（如果它是内容的一部分）。

如果您绝对必须将其包含在CSS文件中，您可以尝试data: urls（IE7及以下版本不支持）。

答案 3 :(得分：7)

首先我们使用 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>

然后我们应用灵感来自 this article

的 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>

CSS rounded triangle

为了控制半径，我们只需调整过滤器的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>

CSS rounded corner shapes

值得注意的是，我们可以轻松地为形状添加复杂的背景：

.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>

Rounded shape with CSS gradient

答案 4 :(得分：5)

Ana的回答激发了我尝试另一种方法，一种远离完美的方法，但至少是对称的。这是一个真实大小和爆炸的预览。它只是一个包裹在剪切圈/ border-radius中的边框黑客角色：

Preview

代码（通过单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

答案 5 :(得分：4)

与默里史密斯最受欢迎的版本一起玩。将其写成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)

答案 6 :(得分：1)

-简化版-

在我的情况下，我需要文本带有三个带有三个圆角的三角形图标，但是overflow: hidden;的建议根本不起作用，因为文本最终被隐藏了。

最终结果：The word "Mandatory" along with a triangular warning icon ...演示：https://jsfiddle.net/allenski/7p4tbznr/

使用clip-path可以达到类似的效果。注意：不适用于IE；但是大多数人已经停止支持IE，尤其是自Microsoft以来。在其新的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伪元素。

答案 7 :(得分：0)

我看到有人要求一个等腰三角形，并且通过对上面公认的答案进行了一些改动，我发现如何操纵它以达到我想要的效果（考虑到我需要同样的三角形）。这应该可以帮助希望在圆角三角形中稍有变化的任何人。

您会注意到，我分离出了​​宽度，高度和右上角半径，然后继续更改了右上角半径以成形角。我更改的唯一另一件事是直接在元素上的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>

答案 8 :(得分：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>

相关问题
最新问题