2色のリボンをCSSで作る、最も良い方法を教えてください。

Question

CSSで画像のような背景を作りたいです。

画像をそのまま使う以外で、どの方法が一番スマートですか？

背景を３色にしても擬似要素でつける三角を２色ずつには分けにくいし、そもそも３色にできるのか謎です。
borderのみで色分けする方法は、画像の灰色の部分をどうしたら良いかわかりません。
この形を大小で２つ作って重ねる、というのが今のところ思いついたわかりやすそうな方法です。

色々検索したり試したりしつつ考えているうちにだんだんよくわからなくなったので、
もっとスマートな方法があれば提案お願いします。
このような形を解説したサイトがあれば、それを紹介してもらうだけでも構いません。

回答よろしくお願いします。

Answer 1

background: linear-gradientでストライプ柄にするのはどうでしょうか
以下のようなサイトを利用すると簡単に作れますよ
http://www.colorzilla.com/gradient-editor/

<div class="test">aaaaaaaaaa</div>

.test{
	width:200px;
	height:50px;
	background: linear-gradient(to bottom, #009e90 16%,#009e90 16%,#bcbcbc 16%,#bcbcbc 77%,#bcbcbc 77%,#bcbcbc 77%,#009e90 77%,#009e90 77%); 
}

↓コメントを２つの方法を追加

1. 背景色と同じ色の三角を重ねてリボン型にする

背景色によって三角の色を変えないといけませんが記述は少ないです。

.test {
    height:100px;
	width:250px;
 	position: relative;
	background: linear-gradient(to bottom, #009e90 23%,#009e90 23%,#bcbcbc 23%,#bcbcbc 77%,#bcbcbc 77%,#bcbcbc 77%,#009e90 77%,#009e90 77%); 
}

.test:after{
 content: "";
  position: absolute;
  top: 0;
  right: 0px;
  height: 0;
  width: 0;
  border: 50px solid transparent; /*.testのheightの半分*/
  border-right-color: #fff;
}

1. 平行四辺形を２つ作ってリボンの端を作る

擬似要素を２つ作る分記述が増えますが端が透過されているので背景が画像でも問題なし。

.test {
    height:100px;
	width:250px;
 	position: relative;
	background: linear-gradient(to bottom, #009e90 23%,#009e90 23%,#bcbcbc 23%,#bcbcbc 77%,#bcbcbc 77%,#bcbcbc 77%,#009e90 77%,#009e90 77%); 
}

.test:after{
 content: "";
  position: absolute;
  top: 50px;
  right: -25px;
  height: 50px;
  width: 50px;
transform:skewX(45deg);
background: linear-gradient(to top, #009e90 46%,#009e90 46%,#bcbcbc 46%,#bcbcbc 100%,#bcbcbc 100%); 
}

.test:before{
 content: "";
  position: absolute;
  top: 0;
  right: -25px;
  height: 50px;
  width: 50px;
transform:skewX(-45deg);
background: linear-gradient(to bottom, #009e90 46%,#009e90 46%,#bcbcbc 46%,#bcbcbc 100%,#bcbcbc 100%); 
}

Comments

[sascha]

早速の回答ありがとうございます！
16%のところを23％にしたら理想に近いストライプにできました！
ただ、この形に:afterで、borderで白い三角形を作ってくっつけて、リボンに見せようとしていますが、うまくいきません...。
調べると、リボンの裂け目の部分を透明にするとか色々方法があるようですが、どの方法が一番わかりやすいでしょうか？

[koronatail]

申し訳ありません質問内容をよく見ていませんでした・・・・。
リボン型にするcssを回答に追記しました。
白い三角でいいのであればそれが一番楽です。
追記した内容もストライプ柄の要素に白い三角を重ねたものになっています。
三角の部分を透明にしようと思ったら難しいと思います。
試してないですが平行四辺形型の擬似要素をストライプ柄にして上下に重ねることになるでしょうか。

[koronatail]

三角の部分が透明なリボンもできたので追記しました。記述が増えますがこっちのが使いやすい気がします。
保守性も考えて使い分けてください。

[sascha]

ソースまでご丁寧にありがとうございます！！
平行四辺形というのがよくわかりませんでしたが、縦方向のリボンにカスタマイズしてみたら仕組みが理解できました！
とても勉強になりました。本当にありがとうございます。

Answer 2

もう解決してますが、こんな方法も。％は適当です。

.ribon{
    height: 40px;
    width:500px;
    background-color: #bebdbc;
    border-style: solid;
    border-width: 20px 0;
    border-color: #4cb4af transparent;
    position: relative;
}
.ribon::after{
    position: absolute;
    height:0;width:0;
    top:-20px;right:0;
    border-style: solid;
    border-width: 40px 40px;
    border-color: transparent white transparent transparent;
    content:'';
}

Comments

[sascha]

回答ありがとうございます！

Answer 3

http://coliss.com/articles/build-websites/operation/css/css3-breadcrumbs-by-red-team-design.html

形ならこことか参考になったりするかな