したがって、例えば、1つの半分が1つの角度で歪んでおり、もう1つが1つのdivだけを使って別の角度で歪んでいます。1 divの2つの半分を別々にスタイル設定することはできますか?
理由は、私はDivにまたがってテキストを持っているので、それを2つに分割することはできません。
あなたが提供できる情報やアイデアは大変ありがたいです。
したがって、例えば、1つの半分が1つの角度で歪んでおり、もう1つが1つのdivだけを使って別の角度で歪んでいます。1 divの2つの半分を別々にスタイル設定することはできますか?
理由は、私はDivにまたがってテキストを持っているので、それを2つに分割することはできません。
あなたが提供できる情報やアイデアは大変ありがたいです。
コードを追加していないため、これを例として参照してください。アプローチを推測することは不可能です。しかし、parent div
にbackground:linear-gradient
を加えることでそれを行うことができます。
div{
width:300px;
height:300px;
background:linear-gradient(90deg, red 50%, green 50%);
}
div h1{
text-align:center;
}
<div>
<h1>Hello !!!</h1>
</div>
他のブラウザのサポートのためにvendor prefixes
を追加します。
「幅が50%を超えるとスタイルnr.2を適用する」とは、例えば、connditionの下で適用するルールを一つの要素に一般的な二つの異なるスタイルを持っているいくつかの単純な構造を作成することはできません
(下のスニペットを参照)。
!!私はこれをお勧めしませんが、ことも限られた方法の表示に1つのdivの上の2つの異なる色をグラデーションを使用することによって、このツールhttp://www.colorzilla.com/gradient-editor/
をチェックむしろそれよりも、あなたには、いくつかの構造を行う必要があり、なぜなら2色以上のスタイリングが必要な場合は、単に必要になるからです。
.container, .container2{position:absolute; top:0; left:0; margin:auto; width:200px; height:200px; background:black;}
.bg-1, .bg-12
{height:100%; width:50%; position:absolute; top:0; left:0; background:#CCF;}
.bg-2, .bg-22{height:100%; width:50%; position:absolute; top:0px; left:50%; background:#FCC;}
.text{width:100%; height:100%; position:absolute; top:0; left:0; font-size:80px; text-align:center; vertical-align:middle; line-height:200px;}
.container2{left:230px !important;}
.bg-12{box-shadow: inset 0px 0px 52px 0px rgba(0,0,0,0.75);}
.bg-22{box-shadow: inset 0px 0px 52px 0px rgba(0,255,0,0.75);}
<div class="container">
<div class="bg-1"></div>
<div class="bg-2"></div>
<div class="text">
Text
</div>
</div>
<div class="container2">
<div class="bg-12"></div>
<div class="bg-22"></div>
<div class="text">
Text
</div>
</div>
これは必須ではない多くの要素です。 ':before'と':after''疑似要素を使って作業する必要があります。つまり、 'div 'しか必要ないでしょう – Pevara
@Zorak折り返し部分の錯覚を与えるようにdivの部分を歪めたいとしましょう紙のどのようにすれば、両方のdivを反対の角度に傾けて、それにテキストを歪ませることができますか?可能かどうか? – evilgenious448
@Pefara私は擬似要素を好きではありません。それは、その動作をトリミングし、その振る舞いを理解する必要があるからです。たとえば、https://jsfiddle.net/w3q2fdnz/:要素の後ろにコンテンツdivがあります。 、下のように構造体がきれいになっています - 多分私はそれをz-indexesで扱うことができますか?誰が知っている - しかし、前と後の2つの要素があります。どのように4つのバックグラウンドサイズを追加するのですか?そこに古いfashon divsが来る。 – Zorak
メイト、ノーコードこれが可能であるならば、私が求めています。質問は、私が求めていることを理解している人から答えを得るのに十分なほど明確です。 – evilgenious448
[複数の背景色を1つのdivに適用する方法](https://stackoverflow.com/questions/19081355/how- can-apply-multiple-background-color-to-one-div) – Hobo