0

Web サイトの 2 つの角が切り取られた境界線を作成したいと考えています。さまざまな div サイズにこの境界線が必要です。

1時間ほどで、200pxの固定サイズで動作するようになりました. しかし、どうすればこの柔軟性を得ることができるのかわかりません。

デモはこちら

HTML

<div id="outer"><span>Some Text</span></div>

CSS

body {background: #000;}

#outer {
    width: 200px;
    height: 200px;
    position: relative;
    margin: 0 auto;
    margin-top: 50px;
    background: #0ff;
}

#outer:before {
    content: "";
    height: 200px;
    left: -15px;
    position: absolute;  
    border-top: 15px solid transparent;
    border-right: 15px solid #fff;
}

#outer:after {
    content: "";
    width: 200px;
    height: 200px;
    top: -15px;
    right: -215px;
    position: absolute;
    border-left: 15px solid #fff;
    border-bottom: 15px solid transparent;
}


#outer span {
    width: 200px;
    height: 200px;
    position: absolute;
    padding: 50px;
}

#outer span:before {
    display: block;
    content: "";
    width: 200px;
    top: -15px;
    left: 0;
    position: absolute;
    border-bottom: 15px solid #fff;
    border-left: 15px solid transparent;
}

#outer span:after {
    display: block;
    content: "";
    width: 200px;
    height: 200px;
    top: 200px;
    left: -15px;
    position: absolute;
    border-top: 15px solid #fff;
    border-right: 15px solid transparent;
}

誰もがより良い解決策を知っていますか? ありがとう

4

1 に答える 1

3

あなたはほとんどそれを自分で持っています。寸法と位置にパーセント値を使用するようにフィドルを調整しました。ただし、境界線の幅は15pxのままです。

デモ： http： //jsfiddle.net/b48AK/show
ソース： http： //jsfiddle.net/b48AK

body {background: #8aa; padding:0px; margin:0px}
#outer {
  background: #bfb;
  position:relative;
  margin:15px;
} 

#outer:before { 
  content: ""; 
  height: 100%;
  left: -15px;
  position: absolute;  
  border-top: 15px solid transparent;
  border-right: 15px solid #fff;
} 

#outer:after { 
  content: ""; 
  width: 100%;
  height: 100%;
  top: -15px;
  left: 100%;
  position: absolute; 
  border-left: 15px solid #fff;
  border-bottom: 15px solid transparent;
} 

#outer span:before {
  display: block;
  content: "";
  width: 100%;
  top: -15px;
  left: 0;
  position: absolute;
  border-bottom: 15px solid #fff;
  border-left: 15px solid transparent;
}

#outer span:after {
  display: block;
  content: "";
  width: 100%;
  height: 100%;
  top: 100%;
  left: -15px;
  position: absolute;
  border-top: 15px solid #fff;
  border-right: 15px solid transparent;
}

</ p>

于 2012-11-24T20:57:10.893 に答える