web-dev-qa-db-ja.com

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

CSSの三角形（境界線）にカスタムの16進数の色を使用しようとしています。ただし、境界線プロパティを使用するため、これを実行する方法がわかりません。互換性のためだけに、javascriptとcss3を避けたいと思います。 ＃CAD5E0の色で、三角形に1pxの境界線（三角形の斜めの辺の周り）を持つ白い背景を持たせようとしています。これは可能ですか？ここに私が持っているものがあります：

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

cssbordercss-shapes
107
Ed R

実際には、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;
}

ここでFiddleを更新

enter image description here

173
Scott

私はあなたがそれを受け入れることを知っていますが、これも少ない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/

85
sandeep

これは 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
lalengua

これを実現する別の方法は、特に私がしたようにこれを正三角形またはさらには不等辺三角形で動作させる必要がある人にとっては、複数の値とぼかし半径なしで filter: drop-shadow(...) を使用することです。これには、複数の要素を必要としない、またはboth：beforeと：afterにアクセスするという追加の利点があります（インラインの：afterコンテンツでこれを達成しようとしていたので、絶対配置も避けてください）。

上記の場合、：afterのCSSは次のようになります（ fiddle ）：

.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では問題ないようですが）
  • 上記の2番目のdrop-shadow（）の<offset-y>値の.5pxが1pxの場合よりも1pxのように見える理由はよくわかりませんが、少なくとも私のモニターでは実際のトリガーベースの値や、その問題の.5pxまたは.1pxの違いも見られません）。
  • 1pxを超える境界線（そのように見える）はうまく機能していないようです。または少なくとも解決策が見つかりませんでしたが、少し大きくするための最適ではない方法については以下を参照してください。 （drop-shadow（）のドキュメント化されているがサポートされていない4番目のパラメーター（<spread-radius>）は、複数のフィルター値ではなく、実際に探しているものだと思いますが、追加するだけで完全に壊れてしまいます。）ここでは、1px（ fiddle ）を超えると何が起こるかを見ることができます。
.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よりも見栄えの良いものが必要な場合は、次のようなものに変更することで、これらの影を構築できると思います（ fiddle ）：

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);

ここで、最初のものにはぼかし半径が設定され（この場合は2.5px、結果は乗算されます）、残りはすべて0でぼかしがあります。しかし、これはすべての面で同じ色に対してのみ機能し、丸みを帯びた角や、非常に粗いエッジでは、大きくなるほど大きくなります。

0
Max Starkenburg
.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;
}
0
Sharan