Geek Answers Handbook

Make part of div border transparent html

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

If not which approach can you advise?

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

enter image description here

+6
source share
3 answers

Here's a solution using the :before and :after : Fiddle pseudo-classes

It should work on all major browsers, including Internet Explorer 8 +

+3
source

Since DIVs have only 4 elements (top, bottom, left, right), you cannot make part of the transparent AFAIK frame.

However, you can create elements that overlay your div and use relative positioning to create a border to your liking. For instance:

 <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 http://jsfiddle.net/Bekqu/3/ .

+4
source

Here are two possible ways to do this:

Mandatory HTML will remain unchanged in both methods and will look like this:

HTML:

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

Method # 01:

  • Draw the top, right, and left borders using the border css property.
  • Draw the bottom transparent border using the 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, left and right borders with the property border the css.
  • 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>
0
source

More articles:


All Articles