3

CSS で境界線をいじろうとしていますが、次の「箱型」の外観を実現する方法がわかりません。

ここに画像の説明を入力

出来ますか？もしそうなら、どうすればこれを達成できますか（コントラストを追加するために暗い背景を使用しないでください）

4

1 に答える 1

3

それは可能です-:after境界線でいくつかの追加のCSSトリックを使用します。

例

http://jsfiddle.net/EaZ8r/3/

CSS

body { 
    background: #000;
}

#box {
    height: 150px;
    width: 200px;
    background: #fff;
    margin: 0 auto;
    position: relative;
}

#box:after {
    display: block;
    background: blue;
    width: 180px;
    height: 0px;
    border: 10px #000 solid;
    border-top: 15px #eee solid;
    content: "";
    position: absolute;
    bottom: 0px;
}

使い方？

ここで重要なのborderは、ブラウザによってどのように溺れるかをよく理解することです。この例を確認してください：http：//jsfiddle.net/n2nsB/。2つの境界線が互いに出会うと、キャンバスがそれらの間で分割され、ある種の三角形がそこに溺れます。これは、次の2つの理由から、非常に便利です。

  1. まず、border-width4つのボーダーすべてに個別に設定できるので、分割角度を変更できます！例を確認してください：http：//jsfiddle.net/n2nsB/1/
  2. 次に、さらに重要です。にborder-color等しい値を設定して非background表示にすることができます。例： http： //jsfiddle.net/n2nsB/2/
  3. 要素に高さがない場合でも、境界線を設定できます。これにより、境界線はその要素に溺れるものだけになります。例： http： //jsfiddle.net/n2nsB/3/

一方、:after疑似要素がどのように機能するかも知っておく必要があります。Web上でそれについての本当に良いチュートリアルをたくさん見つけることができます。私は最初にこれを提案します：http：//coding.smashingmagazine.com/2011/07/13/learning-to-use-the-before-and-after-pseudo-elements-in-css/

だから、それらすべてを組み合わせて、あなたが望むものを手に入れてください。

于 2013-02-26T21:32:49.857 に答える