使 div 边框的一部分透明 html

Question

Can I make part (from x1 to x2) of div border transparent?

If not what approach can you advice?

My idea [very bad] is to draw border in canvas element and place it (canvas body is trasparent) over div element.

Answer 1

Since DIVs have only 4 elements (top, bottom, left, right) you can't make part of a border transparent AFAIK.

However, you could create elements that would overlay your div and use relative positioning to build a border to your taste. For example:

<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>

You can see the result at http://jsfiddle.net/Bekqu/3/ .

Answer 2

Here are two possible ways to do this:

Required HTML will remain the same in both methods and is as follows:

HTML:

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

---

Method #01:

1. Draw the top, right and left borders with border css property.
2. Draw the bottom transparent border with linear-gradient css property.

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>

---

Method #02:

1. Draw the top, right and left borders with border css property.
2. Draw the bottom borders with :before and :after pseudo elements.

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>