html - div ボーダーの一部を透明な html にする

Question

div ボーダーの一部 (x1 から x2 まで) を透明にすることはできますか?

そうでない場合、どのようなアプローチをアドバイスできますか?

私の考え[非常に悪い]は、キャンバス要素に境界線を描画し、それをdiv要素の上に配置することです(キャンバス本体は透明です)。

Answer 1

DIVには4つの要素（上、下、左、右）しかないため、境界線の一部を透明なAFAIKにすることはできません。

ただし、divをオーバーレイする要素を作成し、相対的な配置を使用して好みに合わせた境界線を作成することはできます。例えば：

<style>
 .multiborder{
        border:1px solid black;
        border-top:none;
        width:500px;
        height:100px;
        position:relative;
    }
    .top-border-1{
        border-top:2px solid red;
        width:100px;
        position:absolute;
        top:0px;
        right:0px;
    }
    .top-border-2{
        border-top:3px double blue;
        width:300px;
        position:absolute;
        top:0px;
        left:0px;
    }
</style>
<div class="multiborder">
    <div class="top-border-1"></div>
    <div class="top-border-2"></div>
</div>

結果はhttp://jsfiddle.net/Bekqu/3/で確認できます。

Answer 2

これを行うには、次の 2 つの方法があります。

RequiredHTMLは両方の方法で同じままで、次のとおりです。

HTML:

<div class="box"></div>

---

方法 #01:

1. bordercss プロパティで上下左右の枠線を描画します。
2. linear-gradientcssプロパティで下の透明枠を描画します。

CSS:

.box {
  /* Following css will create bottom border */
  background: linear-gradient(to right, #000 30%, transparent 30%, transparent 70%, black 70%) no-repeat;
  background-size: 100% 8px;
  background-position: 0 100%;

  /* Following css will create top, left and right borders */
  border: solid #000;
  border-width: 8px 8px 0;

  width: 100px;
  height: 50px;
}

html,
body {
  height: 100%;
}
body {
  background: linear-gradient(to top, #ff5a00 0, #ffae00 100%);
  margin: 0;
}
.box {
  background: linear-gradient(to right, #000 30%, transparent 30%, transparent 70%, black 70%) no-repeat;
  background-size: 100% 8px;
  background-position: 0 100%;
  border: solid #000;
  border-width: 8px 8px 0;
  margin: 20px 15px;
  width: 100px;
  height: 50px;
}

<div class="box"></div>

---

方法 #02:

1. bordercss プロパティで上下左右の枠線を描画します。
2. :beforeおよび:after疑似要素を使用して下の境界線を描画します。

CSS:

.box {
  /* Following css will create top, left and right borders */
  border: solid black;
  border-width: 8px 8px 0;

  position: relative;
  overflow: hidden;
  width: 100px;
  height: 50px;
}

/* Following css will create bottom border */
.box:before,
.box:after {
  position: absolute;
  background: #000;
  content: '';
  height: 8px;
  width: 30%;
  bottom: 0;
  left: 0;
}

.box:after {
  left: auto;
  right: 0;
}

html,
body {
  height: 100%;
}
body {
  background: linear-gradient(to top, #ff5a00 0, #ffae00 100%);
  margin: 0;
}
.box {
  border: solid black;
  border-width: 8px 8px 0;
  position: relative;
  overflow: hidden;
  margin: 15px 10px;
  width: 100px;
  height: 50px;
}

.box:before,
.box:after {
  position: absolute;
  background: #000;
  content: '';
  height: 8px;
  width: 30%;
  bottom: 0;
  left: 0;
}

.box:after {
  left: auto;
  right: 0;
}

<div class="box"></div>