質問をすることでしか得られない、回答やアドバイスがある。

15分調べてもわからないことは、質問しよう!

ただいまの
回答率

90.33%

  • CSS

    6201questions

    CSSはXMLやHTMLで表現した色・レイアウト・フォントなどの要素を指示する仕様の1つです。

  • CSS3

    2211questions

    CSS(Cascading Style Sheet)の第3版です。CSS3と略されることが多いです。色やデザインを柔軟に変更することが可能になります。

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

解決済

回答 3

投稿 編集

  • 評価
  • クリップ 1
  • VIEW 975

sascha

score 10

イメージ説明

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

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

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

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

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

  • 気になる質問をクリップする

    クリップした質問は、後からいつでもマイページで確認できます。

    またクリップした質問に回答があった際、通知やメールを受け取ることができます。

    クリップを取り消します

  • 良い質問の評価を上げる

    以下のような質問は評価を上げましょう

    • 質問内容が明確
    • 自分も答えを知りたい
    • 質問者以外のユーザにも役立つ

    評価が高い質問は、TOPページの「注目」タブのフィードに表示されやすくなります。

    質問の評価を上げたことを取り消します

  • 評価を下げられる数の上限に達しました

    評価を下げることができません

    • 1日5回まで評価を下げられます
    • 1日に1ユーザに対して2回まで評価を下げられます

    質問の評価を下げる

    teratailでは下記のような質問を「具体的に困っていることがない質問」、「サイトポリシーに違反する質問」と定義し、推奨していません。

    • プログラミングに関係のない質問
    • やってほしいことだけを記載した丸投げの質問
    • 問題・課題が含まれていない質問
    • 意図的に内容が抹消された質問
    • 広告と受け取られるような投稿

    評価が下がると、TOPページの「アクティブ」「注目」タブのフィードに表示されにくくなります。

    質問の評価を下げたことを取り消します

    この機能は開放されていません

    評価を下げる条件を満たしてません

    評価を下げる理由を選択してください

    詳細な説明はこちら

    上記に当てはまらず、質問内容が明確になっていない質問には「情報の追加・修正依頼」機能からコメントをしてください。

    質問の評価を下げる機能の利用条件

    この機能を利用するためには、以下の事項を行う必要があります。

回答 3

checkベストアンサー

+3

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

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

  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. 平行四辺形を2つ作ってリボンの端を作る
    擬似要素を2つ作る分記述が増えますが端が透過されているので背景が画像でも問題なし。
.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%); 
}

投稿

編集

  • 回答の評価を上げる

    以下のような回答は評価を上げましょう

    • 正しい回答
    • わかりやすい回答
    • ためになる回答

    評価が高い回答ほどページの上位に表示されます。

  • 回答の評価を下げる

    下記のような回答は推奨されていません。

    • 間違っている回答
    • 質問の回答になっていない投稿
    • スパムや攻撃的な表現を用いた投稿

    評価を下げる際はその理由を明確に伝え、適切な回答に修正してもらいましょう。

  • 2017/01/13 17:08

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

    キャンセル

  • 2017/01/13 19:16

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

    キャンセル

  • 2017/01/13 19:30

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

    キャンセル

  • 2017/01/13 23:31 編集

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

    キャンセル

+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:'';
}

投稿

  • 回答の評価を上げる

    以下のような回答は評価を上げましょう

    • 正しい回答
    • わかりやすい回答
    • ためになる回答

    評価が高い回答ほどページの上位に表示されます。

  • 回答の評価を下げる

    下記のような回答は推奨されていません。

    • 間違っている回答
    • 質問の回答になっていない投稿
    • スパムや攻撃的な表現を用いた投稿

    評価を下げる際はその理由を明確に伝え、適切な回答に修正してもらいましょう。

  • 2017/01/14 11:28

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

    キャンセル

+1

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

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

投稿

  • 回答の評価を上げる

    以下のような回答は評価を上げましょう

    • 正しい回答
    • わかりやすい回答
    • ためになる回答

    評価が高い回答ほどページの上位に表示されます。

  • 回答の評価を下げる

    下記のような回答は推奨されていません。

    • 間違っている回答
    • 質問の回答になっていない投稿
    • スパムや攻撃的な表現を用いた投稿

    評価を下げる際はその理由を明確に伝え、適切な回答に修正してもらいましょう。

同じタグがついた質問を見る

  • CSS

    6201questions

    CSSはXMLやHTMLで表現した色・レイアウト・フォントなどの要素を指示する仕様の1つです。

  • CSS3

    2211questions

    CSS(Cascading Style Sheet)の第3版です。CSS3と略されることが多いです。色やデザインを柔軟に変更することが可能になります。