Divs on border design conflicts with fixed background [duplicate] - 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:
Draw the top, right and left borders with border css property.
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:
Draw the top, right and left borders with border css property.
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>