斜めのコーナーからコーナーdiv

StackOverflow https://stackoverflow.com/questions/20353744

  •  25-08-2022
  •  | 
  •  

質問

次のようなWebページをデザインしようとしています。私はバックエンドのプログラマーですが、魅力的なサイトを構築できるようにデザインについてもっと学びたいと思っていました。私は、下のように見えるコーナーに7つの斜めのdiv（虹の色ごと）を持っていることを探しています。現在のテキストは、背景の色がどのようなものかを表しています。これらのDIVは、ページデータをロードするためのリンクになります。それぞれ内部のテキストも斜めにしたいのですが、テキストの回転でそれを行うことができると思います。

この問題の支援は大歓迎されます。また、HTML、CSS、jQueryで魅力的なWebページを構築する方法を学ぶための素晴らしいリソースを知っている場合は、素晴らしいことです。私は、空白のキャンバスを取り、それをまだ美しくする方法がわからない構文を取得します。ありがとう。

enter image description here

役に立ちましたか？

解決

CSS3へようこそ、これは単なる概念の証明です。 IE8がこれをサポートすることを期待しないでください！ http://jsfiddle.net/treetree/fyysn/7/

body {
    overflow:hidden;
    margin:0;
}

.rainbow {
    width:500px;
    transform:rotate(-45deg);
    -webkit-transform:rotate(-45deg);
    -ms-transform:rotate(-45deg);
    -moz-transform:rotate(-45deg);
    transform-origin:0% 0%;
    -ms-transform-origin:0% 0%;
    -moz-transform-origin:0% 0%;
    -webkit-transform-origin:0% 0%;
    position:absolute;
    top:200px;
    left:-150px;
}

.rainbow div {
    height:40px;
    text-align:center;

}

div a {
    line-height:40px;
    color:white;
    text-decoration:none;
    font-size:20px;
}

編集：これはクリーンなソリューションです。各バーを変換する代わりに、コンテナを変換します。

ライセンス： CC-BY-SA と 帰属
所属していません StackOverflow
scroll top