Question

我有一些图像，我想在右上角和左下角有一半边框。我遇到的问题是：

问题1：我已设法在所有四个角落切割边框，但无法切割左上角和右下角。下面的代码（我正在使用KillaCam提供的这个小提琴，并进行了一些实验，结果是所有四个角首先出现，然后其中三个消失！：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;
}

问题2 我已经有一个面板，它使用css表方法垂直居中，在悬停时也可以看到。当我将面板的代码与角落边框结合在一起时，我的垂直居中就没那么了！我猜这种情况正在发生，因为我正在使用额外的div作为边框，但我没有设法使用:before制作角落（在悬停时不起作用）。下面的HTML和CSS以及显示我想要制作的图像：

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

图片展示了我想要制作的内容：http://tinypic.com/r/2gy5zk4/8。

如果我必须使用javascript，我会，但我不是很擅长，所以依靠css使它工作。非常感谢您的帮助。

Answer 1

以下是一个解决方案：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

问题＃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; }

在右上角和左下角的半边框与css

2 个答案: