純粋な CSS で角丸三角形を実装する 3 つの方法 (スキル共有)

この記事ではCSSを使って角丸三角形を描画する3つの方法を紹介します。一定の参考値があるので、困っている友達が参考になれば幸いです。

以前、この記事「6 CSS で三角形を描くテクニック (共有)」で、CSS を使用して三角形を実現する 6 つの方法を紹介しました。

しかし、非常に重要なシーンが抜けています。純粋な CSS を使用して角の丸い三角形を実装するにはどうすればよいでしょうか? 、次のようにします:

この記事では、角が丸い三角形を実装するいくつかの方法を紹介します。

方法 1. 完全互換の SVG メソッド

角が丸い三角形を生成したい場合は、最小限のコードでこれが最善ですSVGを使用して生成されます。

SVG のポリゴン タグ <polygon></polygon> を使用して三角形の形状を生成し、SVG の ストローク-linejoin="round" を使用して接続部分に丸い角を生成します。

コードの量は非常に少なく、コア コードは次のとおりです:

<svg>
  <polygon></polygon>
</svg>

.triangle {
    fill: #0f0;
    stroke: #0f0;
    stroke-width: 10;
}

実際のグラフィックスは次のとおりです:

ここでは、実際に SVG ポリゴンを使用します。 ストローク-ラインジョイン:round Round 属性によって生成される丸い角、ストローク-ラインジョイン

とは何ですか?ストロークされた 2 つの線分の間のスペースを制御するために使用されます。オプションの値が 3 つあります:

• miter
はデフォルト値で、正方形のブラシを使用して鋭い角を形成することを意味します。接続部
• round
は、滑らかな効果を実現するために丸い角で接続することを意味します
• #ベベル接続は留め継ぎを形成します

実際には、境界線のある多角形を介して 丸い三角形を生成します。境界線の接続タイプは ストローク-ラインジョイン:ラウンドです。

背景色と境界線の色を分離すると、実際には次のようになります:

.triangle {
    fill: #0f0;
    stroke: #000;
    stroke-width: 10;
}

ストローク幅でフィレット サイズを制御します

#それでは、フィレットのサイズを制御するにはどうすればよいでしょうか?これも非常に簡単で、

ストローク-幅のサイズを制御することでフィレットのサイズを変更することができます。

もちろん、三角形のサイズを一定に保つには、

ストローク幅を増減しながら、幅/##を増減する必要があります。グラフィックの #高さ ：

完全なデモについては、ここをクリックしてください: CodePen デモ -- SVG を使用して丸みのある三角形を実装するコーナー

https: //codepen.io/Chokcoco/pen/eYWZvKo

方法 2. グラフィックスプライシング

ただし、前述のとおり上では、

純粋な CSS を使用します。角の丸い三角形を実装します。

ただし、上記の最初の方法では、実際には SVG を使用します。では、CSSだけを使用する方法はあるのでしょうか? もちろん、発散的思考、CSS の興味深い部分はここにあり、グラフィックを使用すると、多くの独創的な解決策が可能になります。

見てみましょう。丸い三角形は実際にはいくつかの部分に分割できます:

つまり、実際に必要なのは、描画できることだけです。このような角の丸いひし形の場合、3つを回転させて重ね合わせると、丸い三角形が得られます。

角の丸いひし形を描く

それでは、次の目標は角の丸いひし形を描くことになります。方法はたくさんあります。この記事ではそのうちの 1 つを紹介します:

1. まず、正方形をひし形の形に変換します。

transform

固定の数式があります: <div class="code" style="position:relative; padding:0px; margin:0px;"><div class="code" style="position:relative; padding:0px; margin:0px;"><div class="code" style="position:relative; padding:0px; margin:0px;"><pre class='brush:php;toolbar:false;'>&lt;div&gt;&lt;/div&gt;</pre><div class="contentsignin">ログイン後にコピー</div></div><div class="contentsignin">ログイン後にコピー</div></div><div class="contentsignin">ログイン後にコピー</div></div><div class="code" style="position:relative; padding:0px; margin:0px;"><pre class='brush:php;toolbar:false;'>div { width: 10em; height: 10em; transform: rotate(-60deg) skewX(-30deg) scale(1, 0.866); }</pre><div class="contentsignin">ログイン後にコピー</div></div>

2. いずれかの角を変換し、角を丸くします:

div {
 width:  10em;
 height: 10em;
 transform: rotate(-60deg) skewX(-30deg) scale(1, 0.866);
  + border-top-right-radius: 30%;
}

この時点で、角が丸いひし形を取得することに成功しました。

角の丸い 3 つのひし形を結合する

次のステップは非常に簡単です。要素の他の 2 つの擬似要素を使用して、さらに 2 つのひし形を生成するだけです。角が丸い菱形は、合計 3 つのグラフィックスの回転と移動で結合できます。

完全なコードは次のとおりです:

<div></div>

div{
    position: relative;
    background-color: orange;
}
div:before,
div:after {
    content: '';
    position: absolute;
    background-color: inherit;
}
div,
div:before,
div:after {
    width:  10em;
    height: 10em;
    border-top-right-radius: 30%;
}
div {
    transform: rotate(-60deg) skewX(-30deg) scale(1,.866);
}
div:before {
    transform: rotate(-135deg) skewX(-45deg) scale(1.414, .707) translate(0,-50%);
}
div:after {
    transform: rotate(135deg) skewY(-45deg) scale(.707, 1.414) translate(50%);
}

就可以得到一个圆角三角形了！效果如下：

完整的代码你可以戳这里：CodePen Demo -- A triangle with rounded

https://codepen.io/Chokcoco/pen/vYmLVZr

法三. 图形拼接实现渐变色圆角三角形

完了吗？没有！

上述方案，虽然不算太复杂，但是有一点还不算太完美的。就是无法支持渐变色的圆角三角形。像是这样：

如果需要实现渐变色圆角三角形，还是有点复杂的。但真就还有人鼓捣出来了，下述方法参考至 -- How to make 3-corner-rounded triangle in CSS。

同样也是利用了多块进行拼接，但是这次我们的基础图形，会非常的复杂。

首先，我们需要实现这样一个容器外框，和上述的方法比较类似，可以理解为是一个圆角菱形（画出 border 方便理解）：

<div></div>

div {
    width: 200px;
    height: 200px;
    transform: rotate(30deg) skewY(30deg) scaleX(0.866);
    border: 1px solid #000;
    border-radius: 20%;
}

接着，我们同样使用两个伪元素，实现两个稍显怪异的图形进行拼接，算是对 transform 的各种用法的合集：

div::before,
div::after {
    content: "";
    position: absolute;
    width: 200px;
    height: 200px;
}
div::before {
    border-radius: 20% 20% 20% 55%;
    transform: scaleX(1.155) skewY(-30deg) rotate(-30deg) translateY(-42.3%) skewX(30deg) scaleY(0.866) translateX(-24%);
    background: red;
}
div::after {
    border-radius: 20% 20% 55% 20%;
    background: blue;
    transform: scaleX(1.155) skewY(-30deg) rotate(-30deg) translateY(-42.3%) skewX(-30deg) scaleY(0.866) translateX(24%);
}

为了方便理解，制作了一个简单的变换动画：

本质就是实现了这样一个图形：

最后，给父元素添加一个 overflow: hidden 并且去掉父元素的 border 即可得到一个圆角三角形：

由于这两个元素重叠空间的特殊结构，此时，给两个伪元素添加同一个渐变色，会完美的叠加在一起：

div::before,
div::after, {
    background: linear-gradient(#0f0, #03a9f4);
}

最终得到一个渐变圆角三角形：

上述各个图形的完整代码，你可以戳这里：CodePen Demo -- A triangle with rounded and gradient background

https://codepen.io/Chokcoco/pen/LYyGRpV

最后

本文介绍了几种在 CSS 中实现带圆角三角形的方式，虽然部分有些繁琐，但是也体现了 CSS ”有趣且折磨人“ 的一面，具体应用的时候，还是要思考一下，对是否使用上述方式进行取舍，有的时候，切图也许是更好的方案。

好了，本文到此结束，希望对你有帮助 :)

原文地址：https://segmentfault.com/a/1190000040344317

作者：chokcoco

更多编程相关知识，请访问：编程视频！！

以上が純粋な CSS で角丸三角形を実装する 3 つの方法 (スキル共有)の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。