0

この図のような div を作成したいと思います。

ここに画像の説明を入力

これまでのところ、これを作成しました：

<div style="width: 300px; height: 200px; left:20px; top: 40px;">
<div style="width: 300px; height: 20px; top: 0px; background-color: #76b900; border-radius: 3px; "/>

</div>

写真のように色のグラデーションを追加する方法。また、写真のように 45 度の角度を追加するにはどうすればよいですか?

4

4 に答える 4

1

CSS だけを使用してこれを達成するには、2 つの div が必要になると思います。

1つはテキストを含むブロックとして、右側にはdivをフロートさせ、これに同様のスタイルを適用する必要があります:

CSS三角形はどのように機能しますか?

個人的には画像を検討します。

于 2012-11-02T14:30:04.280 に答える
1

アイデアは、メイン要素と同じグラデーションを持つ疑似要素を使用することですが、斜めに横切ってから 45 度回転させます。

h1 {
    background: linear-gradient(#5FA309, #3B8018);
    position: relative;
    line-height: 30px;
}

​h1:after {
    content: '';
    background: linear-gradient(top left, #5FA309, #3B8018);
    transform: rotate(45deg);
    position: absolute;
    top: 4px; right: -11px;
    width: 21px;
    height: 21px;
}​

ここにデモがあります: http://codepen.io/JosephSilber/pen/bFfqn

PS本番環境ではベンダープレフィックスを忘れないでください...

于 2012-11-02T14:45:16.520 に答える
1

どうぞ：

<div class-"container">
 <div class="arrow-body"></div>
 <div class="arrow-right"></div>
</div>

.container {
 width:300px;
 overflow:auto;
}

.arrow-body {
 width:270px;
 height:60px;
 background:green;
 float:left;
}

.arrow-right {
 width: 0; 
 height: 0; 
 border-top: 30px solid transparent;
 border-bottom: 30px solid transparent;
 border-left: 30px solid green;
 float:left;
}
于 2012-11-02T14:50:39.210 に答える
1

2 divs を使用するか:after、矢印ポイントの画像のみを含む疑似要素を使用できます。

:before編集: 考えてみると、2 つの歪んだ div を使用するには、矢印ポイントのイメージで疑似要素を使用する必要もあります。

于 2012-11-02T14:36:09.650 に答える