CSS三角形のカスタム境界線の色


114

CSSの三角形(境界線)にカスタムの16進数の色を使用しようとしています。ただし、ボーダープロパティを使用しているため、これをどのように行うかわかりません。互換性のために、javascriptとcss3を避けたいと思います。三角形の背景を白にし、1pxの境界線(三角形の斜めの辺の周り)に#CAD5E0の色を付けます。これは可能ですか?ここに私がこれまで持っているものがあります:

.container {
    margin-left: 15px;
    width: 200px;
    background: #FFFFFF;
    border: 1px solid #CAD5E0;
    padding: 4px;
    position: relative;
    min-height: 200px;
}

.container:after {
    content: '';
    display: block;
    position: absolute;
    top: 10px;
    left: 100%;
    width: 0;
    height: 0;
    border-color: transparent transparent transparent #CAD5E0;
    border-style: solid;
    border-width: 10px;
}​

私のフィドル:http : //jsfiddle.net/4ZeCz/

回答:


185

あなたは実際には2つの三角形でそれを偽造する必要があります...

.container {
    margin: 15px 30px;
    width: 200px;
    background: #fff;
    border: 1px solid #a00;
    position: relative;
    min-height: 200px;
    padding: 20px;
    text-align: center;
    color: #fff;
    font: bold 1.5em/180px Helvetica, sans-serif;
    text-shadow: 0 0 1px #000;
}

.container:after,
.container:before {
    content: '';
    display: block;
    position: absolute;
    left: 100%;
    width: 0;
    height: 0;
    border-style: solid;
}

.container:after {
    top: 10px;
    border-color: transparent transparent transparent #fdd;
    border-width: 10px;
}

.container:before {
    top: 9px;
    border-color: transparent transparent transparent #a00;
    border-width: 11px;
}

ここでフィドルを更新しました

ここに画像の説明を入力してください


1
それは最高です!まさに私が必要としたもの。ありがとうございました。
Ed R

1
ねえ、私は三角形をボックスの反対側に表示するように変更する方法を理解していません(三角形のcssがどのように機能するのか理解していません)
Kevin

1
SMRT-あなたはとても賢いです!
コードウィスパー2014年

5
注、@ Kevinと同じ質問を持つ人のために。border-color属性を見てください。色付きの境界線に応じて、三角形は別の方向を指します。左の変更を指すように矢印をオンにするborder-colorにはtransparent #e3f5ff transparent transparent;、両方で、.container:after及び.container:before
rmagnum2002

1
@スコットこれをありがとう!あなたのJSフィドルはその場にありました!ただし、JSFiddleからのcopypastaに注意してください。CSSファイルに2つの非表示の無効な文字が追加され、CSSファイルで検証/解析エラーが発生しました。非表示の文字を削除すると(文字は幅がゼロだったため、カーソルには表示されませんでしたが、バックスペースできました)、それは見事に機能しました。問題だったのはあなたのコードではありませんでした。JSFiddleが表示されたコードにいくつかの不可解な文字を導入したと思いますか?ダンノ、でも誰かが同じ問題に遭遇した場合に備えて、私は後世のためにそれを述べたかっただけです。
hypervisor666

91

私はあなたがそれを受け入れることを知っていますが、より少ないCSSでこれもチェックしてください:

.container {
    margin-left: 15px;
    width: 200px;
    background: #FFFFFF;
    border: 1px solid #CAD5E0;
    padding: 4px;
    position: relative;
    min-height: 200px;
}

.container:after {
    content: '';
    display: block;
    position: absolute;
    top: 10px;
    right:-7px;
    width: 10px;
    height: 10px;
    background: #FFFFFF;
    border-right:1px solid #CAD5E0;
    border-bottom:1px solid #CAD5E0;
    -moz-transform:rotate(-45deg);
    -webkit-transform:rotate(-45deg);
}

http://jsfiddle.net/4ZeCz/3/


ねえ、私は三角形をボックスの反対側に表示するように変更する方法を理解していません(三角形のcssがどのように機能するのか理解していません)
Kevin

2
@Kevin私はこれを作成しますjsfiddle.net/4ZeCz/97を確認してください。私が使用しているプロパティを試してみてください。質問がある場合は、私に尋ねることができます:)
sandeep

3
説明:これにより、隣接する2つの辺に境界線を持つ通常の正方形要素が作成され、傾斜した三角形が作成されます。次に、正方形が45度傾いているので、三角形が上を向きます(またはどこにでも)。ちなみに、ここでは-webkit-プレフィックスが必要です(-ms-IE9の場合)。他のすべてのブラウザは、プレフィックスなしでサポートします。
rvighne 2014年

非常に賢い解決策です!ありがとうございました。
ソルハン2018年

3

これは、clip-pathを使用した簡単な方法だと思います

.container {
  width: 150px;
  min-height: 150px;
  background: #ccc;
  padding: 8px;
  padding-right: 6%;
  display: inline-block;
  clip-path: polygon(0% 0%,0% 100%,90% 100%,90% 5%,100% 10%,90% 15%,90% 0%);
}
<div class="container">
test content
</div>


1

これを達成する別の方法、特に私が行ったように正三角形または斜角三角形で作業​​するためにこれを必要とする人にとってfilter: drop-shadow(...)、複数の値を使用してぼかし半径を使用しない方法があります。これには、複数の要素を必要としない、または:beforeと:afterの両方にアクセスする必要がないという追加の利点があります(インラインの:afterコンテンツでこれを達成しようとしていたため、絶対配置も避けたかった)。

上記の場合、:afterのCSSは次のようになります(フィドル)。

.container {
  margin-left: 15px;
  width: 200px;
  background: #FFFFFF;
  border: 1px solid #CAD5E0;
  padding: 4px;
  position: relative;
  min-height: 200px;
}
.container:after {
  content: '';
  display: block;
  position: absolute;
  top: 10px;
  left: 100%;
  width: 0;
  height: 0;
  border-style: solid;
  border-width: 20px 0 40px 15px; /* skewed to show support for non-right-angle triangles */
  border-color: transparent transparent transparent #fff;
  filter: drop-shadow(1px 0 0 #CAD5E0) drop-shadow(0 .5px 0 #CAD5E0);
}
<div class="container">
  Test Container
</div>

ただし、いくつかの制限や奇妙な点があると思います。

  • IE11でのサポートなし(FF、Chrome、およびEdgeでは問題ないようですが)
  • <offset-y>上記の2番目のdrop-shadow()の値の.5pxが1pxよりも1pxのように見える理由はよくわかりませんが、三角法に関連していると想像します(少なくとも私のモニターでは、実際のトリガーベースの値、または.5px、さらには.1px。
  • 1pxを超える境界線(まあ、その外観はそのまま)はうまく機能しないようです。または、少なくとも私は解決策を見つけていませんが、少し大きくするには、最適ではない方法について以下を参照してください。(私は<spread-radius>、drop-shadow()のドキュメント化されているがサポートされていない4番目のパラメーター()が、複数のフィルター値の代わりに実際に探しているものだと思うかもしれませんが、それを完全に壊しただけで追加します。 1pxを超えると発生し始めます(フィドル):

.container {
  background-color: #eee;
  padding: 1em;
}
.container:after {
  content: "";
  width: 0;
  height: 0;
  border-style: solid;
  border-width: 20.4px 10px 0 10px;
  border-color: yellow transparent transparent transparent;
  margin-left: .25em;
  display: inline-block;
  filter: drop-shadow(-6px -4px 0 green) drop-shadow(6px -4px 0 red) drop-shadow(0 6px 0 blue);
}
<div class="container">
  Test Container
</div>

最初のもの(緑)は1回適用されますが、2番目のもの(赤)は、境界線を介して作成された黄色の三角形と緑のdrop-shadow()の両方、および最後のもの(青)の両方に適用されます。上記のすべてに適用されます。(おそらく、これは.5pxの外観にも関連しています)。

しかし、1pxよりも広い外観が必要な場合は、次のようなもの(フィドル)に変更することで、これらの影付きの建物を相互に利用できると思います。

filter: drop-shadow(0 0 2.5px red) drop-shadow(0 0 0 red) drop-shadow(0 0 0 red) drop-shadow(0 0 0 red) drop-shadow(0 0 0 red) drop-shadow(0 0 0 red) drop-shadow(0 0 0 red) drop-shadow(0 0 0 red) drop-shadow(0 0 0 red);

最初の1つはぼかし半径セット(この場合は2.5px、結果は乗算されているように見えます)があり、残りはすべて0でぼかしを持っています。しかし、これはすべての面で同じ色に対してのみ機能し、結果は丸みを帯びたコーナーやかなり粗いエッジでは、大きくするほど大きくなります。


0
.triangle{
    position: absolute;
    width:0px;
    height:0px;
    border-left: 45px solid transparent;
    border-right: 45px solid transparent;
    border-bottom: 72px solid #DB5248;
}

.triangle:after{
    position: relative;
    content:"!";
    top:8px;
    left:-8px;
    color:#DB5248;
    font-size:40px;
}

.triangle:before{
    content:".";
    color: #DB5248;
    position: relative;
    top:-14px;
    left:-43px;
    border-left: 41px solid transparent;
    border-right: 41px solid transparent;
    border-bottom: 67px solid white;
}
弊社のサイトを使用することにより、あなたは弊社のクッキーポリシーおよびプライバシーポリシーを読み、理解したものとみなされます。
Licensed under cc by-sa 3.0 with attribution required.