1 divの2つの半分を別々にスタイル設定することはできますか？

Question

したがって、例えば、1つの半分が1つの角度で歪んでおり、もう1つが1つのdivだけを使って別の角度で歪んでいます。

理由は、私はDivにまたがってテキストを持っているので、それを2つに分割することはできません。

あなたが提供できる情報やアイデアは大変ありがたいです。

Answer 1

コードを追加していないため、これを例として参照してください。アプローチを推測することは不可能です。しかし、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を追加します。

Answer 2

あなたは、それよりもむしろ

「幅が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>