如何在Css中创建边框

Question

这是图像。 我想要这样的边界。

Answer 1

您可以尝试这样的事情：

＆＃13;

＆＃13;

#mainDiv {
  height: 100px;
  width: 80px;
  position: relative;
  background: grey;
}

.bottom-left-corner {
  margin: -5px;
  border-left: 1px solid orange;
  border-bottom: 1px solid orange;
  position: absolute;
  top: 25%;
  bottom: 0;
  right: 25%;
  left: 0;
}

.top-right-corner {
  margin: -5px;
  border-right: 1px solid #aaaafa;
  border-top: 1px solid #aaaafa;
  position: absolute;
  top: 0;
  bottom: 25%;
  right: 0;
  left: 25%;
}

＆＃13;

<div id="mainDiv">
  <div class="bottom-left-corner"></div>
  <div class="top-right-corner"></div>
</div>

＆＃13;

＆＃13;

＆＃13;

此致

Answer 2

这样的事情怎么样？

http://codepen.io/anon/pen/GWrzPX

<div class="image">
  <img src="https://www.google.co.uk/images/branding/googlelogo/2x/googlelogo_color_120x44dp.png">
  <span class="blue"></span>
  <span class="red"></span>
</div>

.image{position:relative;width:200px;height:200px}
.red{position:absolute;top:0px;right:0px;margin-right:0px;width:50%;height:50%;background:red;}
.blue{position:absolute;bottom:0px;left:0px;width:50%;height:50%;background:blue}
img{background:#fff;position:absolute;z-index:100;padding:0px;margin:1px;width:198px;height:198px;}

Answer 3

<强> HTML

<div class="example">
  <div>
    <img src="http://www.seowordpress.pl/wp-content/plugins/all-in-one-seo-pack/images/default-user-image.png">
  </div>
</div>

<强> CSS

.example {
  position: relative;
  width: 200px;
  height: 200px;
  padding: 5%;
}

img {
  width: 100%;
}

.example:after {
  position:absolute;
  width: 120px; 
  height: 120px;
  border: solid orange;
  content: ' ';
}

.example>:first-child:after {
  position: absolute;
  width: 120px; 
  height: 120px;
  border: solid lightblue;
  content: ' ';
}

.example:after {
  right:0;
  top:0;
  border-width: 2px 2px 0 0;
}

.example>:first-child:after {
  left: 0;
  bottom: 0;
  border-width: 0 0 2px 2px;
}

https://jsfiddle.net/xcanndy/t1wa825f/