右上角和左下角的半边框与CSS

Question

I have a few images where I'd like half borders to the top right corner and to the bottom left corner. The problems I am running into are:

problem 1: I have managed to cut of borders at all four corners, but can't cut of top left and bottom right. code below (I'm using this fiddle provided by KillaCam, and experimented a little, with the result that all four corners appear at first and then three of them disappears! : http://jsfiddle.net/3jo5btxd/

#div1 {
position: relative;
height: 100px;
width: 100px;
background-color: white;
border: 1px solid transparent;transition: border 2000ms ease 0s;
}

#div2 {
position: absolute;
top: -2px;
left: -2px;
height: 84px;
width: 84px;
background-color: #FFF;
border-radius: 15px;
padding: 10px;
}

Problem 2 I already have a panel that has a link vertically centered using the css table method, which is also visible on hover. When I combine the panel's code with the corner borders, my vertical centering goes out of whack! I guess that is happening because of the extra div I am using for borders, but I haven't managed to make the corners with :before (doesn't work on hover). HTML and css below and the also the image showing what I want to make:

<ul class="img-list">
<li class="category_lists one-third column-block" '="">
<a href="http://kohphangan.smartsolutionpro.us/category/adventure/">
<img src="something.jpg"/>
 <span class="text-content">
 <span>Adventure</span>
 </span>
 </a>
</li>
<li class="category_lists one-third column-block" '="">
  <a href="http://kohphangan.smartsolutionpro.us/category/beach-2/">
<img src="something2.jpg" />
<span class="text-content">
<span>Beach</span>
</span>
</a>
</li> </ul>

CSS:

/*css for the categories on home page*/
.img-list{margin:0;padding:0; list-style:none}
ul.img-list li {
display: inline-block;
height: 20em;
margin: 0;
position: relative;

}
.category_lists.one-third{width:33%; margin-left:0;}
.category_lists img{width:100%; height:auto;}


span.text-content span {
display: table-cell;
text-align: center;
vertical-align: middle;
}
span.text-content {
background: rgba(38,196,83,0.7);
color: white;
cursor: pointer;
display: table;
 height: 7em;
left: 0;
position: absolute;
top: 0;
width: 100%;
opacity: 0;
-webkit-transition: opacity 500ms;
-moz-transition: opacity 500ms;
-o-transition: opacity 500ms;
transition: opacity 500ms;
font-size:42px;
 text-transform:uppercase;
font-family: 'Raleway', sans-serif; font-weight:300
} 
ul.img-list li:hover span.text-content {
   opacity: 1;
}

And the image showing what I want to make: http://tinypic.com/r/2gy5zk4/8 .

If I have to use javascript, I will, but I am not very good at it, so counting on css to make it work. Thanks a lot for any help.

Answer 1

Here's one solution: http://jsfiddle.net/f7u6yxLq/ .

HTML:

<div></div>

CSS:

* {
    margin: 0;
    padding: 0;
}

body {
    padding: 10px;
}

div {
    position: relative;
    display: table;
    width: 200px;
    height: 100px;
    background: url("http://placehold.it/200x100")
                no-repeat
                top left;
}

div:before,
div:after {
    content: "";
    position: absolute;
    width: 50px;
    height: 50px;
    border: solid white;
    border-width: 2px 2px 0 0;
    display: none;
}

div:before {
    right: 5px;
    top: 5px;
}

div:after {
    border-width: 0 0 2px 2px;
    bottom: 5px;
    left: 5px;
}

div:hover:after,
div:hover:before {
    display: block;
}

Answer 2

Solution for problem #1: http://jsfiddle.net/3jo5btxd/2/

.div2:before, .div2:after {width:9px; height:9px; position: absolute;background:#fff; content:'';}
.div2:before {top:0; left:0;}
.div2:after {bottom:0; right:0; }