Javascriptを使用せずに、このようなカスタムカラーの形状を実現したいと思います。
現在、オレンジ色の長方形のdivの上に「フレーム」の画像をオーバーレイしていますが、これはかなりハッキーです。動的に生成されたcanvas要素を使用できると思いますが、それには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疑似要素に適用し、さらにいくつかを適用して、それらを菱形にします。
そして最後に、交差する3つのひし形があり、オレンジ色の形がそれらの交差点です。三角形にカーソルを合わせると、交差する形状が表示されます;）
widthそれはうまくスケーリングします、あなたはただ要素のとを変更する必要がheightあり.triangleます。
Firefox、Chrome、Safariの場合、ホバーの影響を受けやすいのは角が丸いオレンジ色の三角形だけです（要素と疑似要素に感謝します）pointer-events: none;。それ以外の場合、これは、同じand （および同じ）andを持つ要素でラップすることによって実現できます。.trianglepointer-events: auto;.trianglewidthheightborder-radiusoverflow: hidden;
ノート
- CSSグラデーションでそれを行うこともできます。ただし、2D変換とは異なり、CSSグラデーションはIE9では機能しません。
- 親からスキューを継承する疑似要素のスキューを解除して、回転後に再びスキューする必要がないことを望みますが、それ以外の場合は機能しないようです。
于 2013-01-21T22:00:34.827 に答える
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
マレー・スミスの最も賛成のバージョンで遊んだ。それをスタイラスミックスインとして書き、いくつかのマージンの問題を修正し、方向オプションを追加しました。ミックスインはまた、三角形をややピクセルパーフェクトなサイズにスケーリングします。あまりよくテストされていません。注意して使用してください
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%)
次に、ミックスインをクラスに追加するだけです
.triangle
&.up
triangle()
&.down
triangle(down)
&.left
triangle(left)
&.right
triangle(right)
于 2015-03-09T14:16:07.627 に答える
2
-簡略版-
私の場合、3つの丸い角を持つ三角形のアイコンにテキストを付ける必要overflow: hidden;がありましたが、テキストが最終的に非表示にされたため、提案は単に機能しませんでした。
最終結果：
...デモ：https ：//jsfiddle.net/allenski/7p4tbznr/
を使用して同様のマスクを実現することができましたclip-path。注：IEでは機能しません。ただし、特にMicrosoftがサポートして以来、ほとんどの場合、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
二等辺三角形を求めている人がいるのを見て、上記の受け入れられた答えを改ざんすることで、同じものが必要だと考えて、それを操作して必要なものを取得する方法を見つけました。これは、丸みを帯びた角の三角形のわずかな変化を探している人に役立つはずです。
幅、高さ、およびborder-top-right-radiusを分離してから、border-top-right-radiusを変更してコーナーを形成していることに気付くでしょう。私が変更した他の唯一のことは、要素の直接の変換プロパティでした。自分に合った形にすることができますが、必要な変更はそれだけのようです。
.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 に答える