用css切割边框角落的最佳方法

Question

我有一个视频，我在上面叠加了文字。这个叠加层周围有一个边框，但设计要求切出角落。 这是我想要实现的目标的图像：

有没有办法用简单的css实现这个带有切角的白色边框，而不是只有一些透明的html元素才能添加边框。

Answer 1

您可以使用:before和:after来绘制一些border并稍微使用margin s / width / height为了正确：

div:before { 
    content:'';
    border-top: 4px solid white;
    border-bottom: 4px solid white;
    width: 596px;
    height: 272px;
    margin: 10px 20px;
    position: absolute;
}

div:after { 
    content:'';
    border-left: 4px solid white;
    border-right: 4px solid white;
    width: 612px;
    height: 256px;
    position: absolute;
    margin: 20px 10px;
}

Fiddle

Answer 2

<强> jsBin demo

.video{
    position:relative;
    width:500px;
    height:300px;
    background:url(//placehold.it/500x300/f0f);
}
.overlay{
    /*Uncomment Bachground to reveal the logic */
    /*background:rgba(0,0,0,0.2);*/
    color:#fff;

    position:absolute;
    width:400px;
    margin:50px;
    height:164px;
    padding:15px 0; /* remember 15 ...*/

    border-top:3px solid #fff;
    border-bottom:3px solid #fff;
}
.overlay:before,
.overlay:after{
    content: " ";
    position:absolute;
    background:#fff;
    width: 3px; /* same as .overlay border width */

    top:5%; /* This is also interesting */
    height:90%; /* Do the math */
}
.overlay:before{left: -15px;} /* :) */
.overlay:after{right: -15px;}

Answer 3

从我的评论：多个背景和渐变（可能是1像素图像）DEMO

<div class="cornersOff"><img src="http://lorempixel.com/640/480/cats/1"/></div>

和CSS

.cornersOff {
  position:relative;
  display:inline-block; /* or table or float or width or whatever*/
}
.cornersOff img,
/* not an image ? */ .cornersOff > * {
  display:block;/* or vertical-align:top for inline-block element*/
}
.cornersOff:before {
  content:'';
  height:100%;
  width:100%;
  position:absolute;
  border:solid 10px transparent;/* size here tells how far from borders you want to see these new borders drawn */
  box-sizing:border-box;/* include that border width */
  background:
    linear-gradient(to top, rgba(255,255,255,0.8), rgba(255,255,255,0.8)) top center no-repeat ,
    linear-gradient(to top, rgba(255,255,255,0.8), rgba(255,255,255,0.8)) bottom no-repeat,
    linear-gradient(to top, rgba(255,255,255,0.8), rgba(255,255,255,0.8)) left no-repeat,
    linear-gradient(to top, rgba(255,255,255,0.8), rgba(255,255,255,0.8)) right no-repeat;
  background-size: 580px 3px,580px 3px , 3px 420px, 3px 420px;
  /* it cactches the click event ? : uncomment this : *//* pointer-events:none*/
}

img标签里面可以是iframe，视频标签或只是内容。

如果您通过点击来解决问题，则可以添加.cornersOff:before规则：pointer-events:none;，以便它永远不会发现点击事件....如果这是一个问题，那么你会设置一些不透明度background-color。