在CSS

创建角落边界这一形象在CSS我如何创建“蓝色”和“橙色”的角落，如：在CSS

感谢

2017-03-16 silvadori

你想要做什么是什么呢？详细解释或者你可以谷歌自己 –

这里有一个解决方案，你可以根据它：http://stackoverflow.com/questions/4131490/any-way-to-limit-border-length – Separatrix

您可以使用:before和:after伪 - 班这样的：

div { 
 
    position: relative; 
 
    width: 100px; 
 
    height: 100px; 
 
    margin: 20px; 
 
    border: 1px solid #000; 
 
} 
 

 
div:after { 
 
    display: block; 
 
    content: ""; 
 
    width: 20px; 
 
    height: 20px; 
 
    position: absolute; 
 
    top: -5px; 
 
    right: -5px; 
 
    border-top: 3px solid blue; 
 
    border-right: 3px solid blue; 
 
} 
 
span:before { 
 
    display: block; 
 
    content: ""; 
 
    width: 20px; 
 
    height: 20px; 
 
    position: absolute; 
 
    bottom: -5px; 
 
    left: -5px; 
 
    border-bottom: 3px solid orange; 
 
    border-left: 3px solid orange; 
 
}

<div><span></span></div>

来源

2017-03-16 11:30:30 Arkej

这是工作，感谢很多 – silvadori

试试这个

div{ 
 
     box-sizing:border-box; 
 
    } 
 

 
    div.outer{ 
 
      height:150px; 
 
      width:150px; 
 
      position:relative; 
 
      background:#fff; 
 
      padding:2px; 
 
     } 
 
     div.inner { 
 
       border:1px solid #d6d6d6; 
 
       height:100%; 
 
      width:100%; 
 
     } 
 
     div.outer:before{ 
 
      content:""; 
 
      background:#F87200; 
 
      width:25px; 
 
      height:25px; 
 
      position:absolute; 
 
      bottom:-5px; 
 
      left:-5px; 
 
      display:block; 
 
      z-index: -1; 
 
     } 
 
     div.outer:after{ 
 
      content:""; 
 
      background:#0092D4; 
 
      width:25px; 
 
      height:25px; 
 
      position:absolute; 
 
      top:-5px; 
 
      right:-5px; 
 
      display:block; 
 
      z-index: -1; 
 
     }

<div class="outer"> 
 
     <div class="inner"></div> 
 
    </div>

来源

2017-03-16 11:35:29

如果你“之后”只需要一个HTML标签，即元素去“前”使用和。在这种情况下最外层的div，并调用此元素前后的元素。额外的标签加在渲染器负载上。

div { 
 
    position: relative; 
 
    width: 100px; 
 
    height: 100px; 
 
    margin: 20px; 
 
    border: 1px solid #bbb; 
 
} 
 

 
div:after { 
 
    display: block; 
 
    content: ""; 
 
    width: 20px; 
 
    height: 20px; 
 
    position: absolute; 
 
    top: -5px; 
 
    right: -5px; 
 
    border-top: 3px solid blue; 
 
    border-right: 3px solid blue; 
 
} 
 

 
div:before { 
 
    display: block; 
 
    content: ""; 
 
    width: 20px; 
 
    height: 20px; 
 
    position: absolute; 
 
    bottom: -5px; 
 
    left: -5px; 
 
    border-bottom: 3px solid red; 
 
    border-left: 3px solid red; 
 
}

<div></div>

来源

2017-03-16 11:45:29

回答

相关问题