3

境界の角にある「三角形」の形を取り除くことは可能ですか？（異なる色の境界線を使用する場合）

この例を参照してください。

http://jsfiddle.net/GLsqV/

回避策はありますか？基本的には、上下の境界線を継続させたいだけで、すべてを混在させたくないのです。

 .borders {  
   width:500px;
   height:500px;
   background:#efefef;
   border:10px solid black;
   border-top:10px solid red;
   border-bottom:10px solid green;
 }​
4

3 に答える 3

6

生成されたコンテンツを使用する1つのオプション：

.borders {
    width:500px;
    height:500px;
    position: relative;
    background:#efefef;
    border-top:10px solid red;
    border-bottom:10px solid green;
}

.borders::before,
.borders::after {
    content: '';
    position: absolute;
    width: 10px;
    top: 0;
    bottom: 0;
    background-color: #000;
}

.borders::before {
    left: 0;
}

.borders::after {
    right: 0;
}

JSフィドルデモ。

またはネストされたHTMLを使用する場合（本当に必要な場合）：

<div class="borders">
    <div class="innerBorder left"></div>
    <div class="innerBorder right"></div>
</div>​

.borders {
    width:500px;
    height:500px;
    position: relative;
    background:#efefef;
    border-top:10px solid red;
    border-bottom:10px solid green;
}

.borders .innerBorder{
    content: '';
    position: absolute;
    width: 10px;
    top: 0;
    bottom: 0;
    background-color: #000;
}

.borders .left {
    left: 0;
}

.borders .right {
    right: 0;
}

JSフィドルデモ。

そして、左と右がラッピング要素のであり、幅が子孫のによって制御される単一のネストされた要素border-colorのbackground-colorソリューションmargin：

<div class="borders">
    <div class="inner"></div>
</div>​

CSS：

.borders {
    width:500px;
    height:500px;
    background-color: #000;
    border-top:10px solid red;
    border-bottom:10px solid green;
}

.borders .inner {
    background-color: #efefef;
    height: 100%;
    margin: 0 10px;
}

JSFiddleデモ。</p>

于 2012-11-19T18:44:43.020 に答える
2

単一の要素でどこにでもあるわけではありません。（実際には、境界線のデフォルトの三角形の形状が素晴らしいことを可能にします：CSSの形状）

ただし、あなたが求めていることは、別の子要素を使用してどこでも簡単に可能です。

CSS：

.borders {
  width: 520px;
  height: 500px;
  border-top: 10px solid red;
  border-bottom: 10px solid green;
}

.borders2 {
  background: #efefef;
  width: 500px;
  height: 500px;    
  border-left: 10px solid black;
  border-right: 10px solid black;
}

HTML：

<div class="borders">
  <div class="borders2">
  </div>
</div>​

これらの値を使用しても、外側DIVのボーダーボックスのサイズは520×520ピクセルのままです。

このフィドルも参照してください。

于 2012-11-19T18:59:45.367 に答える
1

それが国境の仕組みです。そうでなければ、ブラウザはどのものがコーナーと重なるかをどのように決定しますか？

この効果は、ネストされたDIVを使用するか、絶対的な配置で：beforeと：afterを使用したトリックを使用して実現できます。

于 2012-11-19T18:39:43.547 に答える