9

私は視覚的に次のように見える CSS でカスタム形状を作成する方法を理解しようとしています:

エッジとボーダーを切り取った形状

と のプロパティbackground:rgba(44, 44, 48, 0.9)でborder:6px solid rgba(29, 30, 35, 0.9);

私の問題は、右上と左下の境界線を提供した画像のように見せる方法が見つからないことです。CSS-Tricks の CSS Custom Shape のヒントを試してみましたが、背景を設定できないため、問題は解決していないようです。何か案は？

4

6 に答える 6

6

3D で考えると、perspectiveおよびrotateX()プロパティを使用して、要素の 1 つまたは 2 つの角度のみを変更できます。

これにより、コンテナの疑似要素のスタイルを設定して目的の形状にし、右上隅と左下隅を切り取ることができます。

シェイプに必要な境界線を与えることもできます (次のデモを参照)。

デモ

出力:

エッジとボーダーを切り取った CSS 形状

div {
  position: relative;
  width: 50%;
  height: 300px;
  margin: 10% auto;
  background: rgba(0, 0, 0, 0.7);
  border-top: 6px solid rgba(0, 0, 0, 0.8);
  border-bottom: 6px solid rgba(0, 0, 0, 0.8);
}
div:before,
div:after {
  content: '';
  position: absolute;
  top: -6px;
  width: 20%;
  height: 100%;
}
div:before {
  right: 100%;
  background: inherit;
  border-top: 6px solid rgba(0, 0, 0, 0.8);
  border-left: 6px solid rgba(0, 0, 0, 0.8);
  border-bottom: 6px solid rgba(0, 0, 0, 0.8);
  -webkit-transform-origin: 100% 0;
  transform-origin: 100% 0;
  -webkit-transform: perspective(1px) rotateY(-0.15deg);
  transform: perspective(1px) rotateY(-0.15deg);
}
div:after {
  left: 100%;
  border-top: 6px solid rgba(0, 0, 0, 0.8);
  border-right: 6px solid rgba(0, 0, 0, 0.8);
  border-bottom: 6px solid rgba(0, 0, 0, 0.8);
  border-left: none;
  background: inherit;
  -webkit-transform-origin: 0 100%;
  transform-origin: 0 100%;
  -webkit-transform: perspective(1px) rotateY(0.15deg);
  transform: perspective(1px) rotateY(0.15deg);
}
<div></div>

于 2014-07-16T18:18:29.577 に答える
3

transformssimpleおよびoverflow: hidden;プロパティを使用して、1 つの要素のみを使用してその形状を作成できます。

別の要素にコンテンツを追加できます。

body {
    background: url(http://i.imgur.com/RT7XR3C.jpg);
    background-size: cover;
}
div {
    height: 200px;
    width: 300px;
    margin: 40px auto;
    overflow: hidden;
    position: relative;
}
div:before {
    content: '';
    position: absolute;
    left: -58px; /*-half buffer -left border*/
    height: 188px;
    width: 400px;
    background: rgba(30, 30, 30, 0.8);
    -webkit-transform: skewX(45deg);
    -moz-transform: skewX(45deg);
    transform: skewX(45deg);
    border-left: 8px solid #222;
    border-right: 8px solid #222;
    border-top: 6px solid #222;
    border-bottom: 6px solid #222;
}
div:after {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    height: 157px;
    width: 6px;
    background: #222;
    box-shadow:0 0 0 0 #222, 294px 43px 0 0 #222;
}
<div></div>

フィドル

出力：

ここに画像の説明を入力

于 2015-02-26T11:48:43.640 に答える
1

残念ながら、疑似要素に疑似要素を追加することはできません (つまり、:after:after{} 機能しません)。あなたのような複雑な形状では、少しごまかして、その子の疑似要素に頼る必要があるかもしれません。

<div class="fancy-box">
    <h2>Title</h2>
    <p>Content</p>
</div>

.fancy-box{/*container, top+bottom borders*/}
.fancy-box:before{/*left-top "square" corner*/}
.fancy-box:after{/*right-bottom "square" corner*/}
.fancy-box>p:before{/*left-bottom "dog ear" border*/}
.fancy-box>p:after{/*right-top "dog ear" border*/}
.fancy-box>h2:before{{/*left-bottom "dog ear" background*/}
.fancy-box>h2:after{/*right-top "dog ear" background*/}

繰り返しますが、このフィドルは単色でどのように機能するかを示しています (「より薄い」角度は好きではありませんが、合理的にはうまくいきます) - ただし、opacity を適用すると失敗します。あなたの最善はおそらく、「犬の耳」を事前にレンダリングされた半透明の PNG にすることです。

ただし、上記の「解決策」は完全なセマンティック ホラーですが、事前にレンダリングされたグラフィックスで複数の背景を使用すると、うまくいく可能性があります。

于 2012-08-20T03:52:41.720 に答える
0

ええと、複数の要素を使用する必要があると思います..3つの要素と2つの疑似要素でその形状を実現できます..ここでそれを見てください http://codepen.io/zwongso/pen/vgxdB

画像とまったく同じ形状ではありませんが、アイデアを得る必要があります..その境界線を取得するには、少し注意が必要です..

誰かがより良い解決策を持っているかどうか知りたい..プレゼンテーション目的のためだけに2つの空の要素を持つことは少し非意味論的..

于 2012-08-20T00:45:27.350 に答える
0

サポートに関していくつか問題があるかもしれませんが、SVG 背景は良い解決策かもしれません。どのような場合に使用できますか... CSS バックグラウンドでの SVG を参照してください。また、適切に機能させるのは非常に困難です。SVG 背景を使用する場合は、それを CSS にデータ URI として埋め込むことを検討してください ( fiddleを参照してください。また、上記の fiddle :-p の警告にも注意してください)。

于 2012-08-20T00:59:40.183 に答える