在CSS中的“房子般的”边界

Question

我有一个带有简单边框的div：

border: 10px solid #642850; 

div {
  border: 10px solid #642850;
  height: 100px;
  width: 100px;
}

<div></div>

我正在寻找这样的形状：

实现这一目标的最佳方法是什么？

Answer 1

试试这个： http://jsfiddle.net/sachinkk/L5zz1hak/2/

.sq {
  border: 10px solid #642850;
  height: 100px;
  width: 100px;
  position: relative;
  margin-top: 100px;
}
.tl {
  position: absolute;
  top: -33px;
  left: -36px;
  border-left: 10px solid #642850;
  border-top: 10px solid #642850;
  height: 76px;
  width: 76px;
  transform: rotate(45deg);
  -webkit-transform: rotate(45deg);
  -moz-transform: rotate(45deg);
  -o-transform: rotate(45deg);
  transform-origin: 100% 100%;
}

<div class="sq">
  <div class="tl"></div>
</div>

Answer 2

CSS

通过使用pseudo-element并使用css变换，可以完成所需的形状。

＆＃13;

＆＃13;

div {
  background: white;
  border: 10px solid #642850;
  width: 100px;
  height: 100px;
  margin-top: 75px;
  positioN: relative;
}
div::before {
  margin-top: -52px;
  border: 10px solid #642850;
  background: white;
  content: '';
  transform: rotate(45deg);
  position: absolute;
  top: 0;
  left: 8px;
  height: 64px;
  width: 64px;
  z-index: -2;
}

＆＃13;

<div></div>

＆＃13;

＆＃13;

＆＃13;

SVG

另一种方法是使用SVG生成您想要的形状。 SVG的响应能力和浏览器支持得很好。

＆＃13;

＆＃13;

<svg width="50%" viewbox="0 0 100 100">
  <polygon points="2,25 2,98 98,98 98,25 50,2z" fill="white" stroke-width="2" stroke="#642850"></polygon>
  <polyline points="2,25 98,25" stroke="#642850" stroke-width="2"></polyline>
</svg>

＆＃13;

＆＃13;

＆＃13;

Answer 3

试试这个

.b{
    width:200px;
    height:100px;
    overflow:hidden;
}

.b div{
    width:200px;
    height:200px;
    transform:rotate(45deg);
    content:"";
    border:10px solid red;
    margin-top:40px;
    margin-left:-10px;
}
.a{
    width:180px;
    height:200px;
    border:10px solid red;
    margin-top:0px;
}

<div class="b"><div></div></div>
<div class="a"></div>

Answer 4

使用一个div并使用生成的内容：

div {width:100px; height:100px; border:5px solid red; position:relative; margin-top:50px}
div:after,div:before {content:""; position:absolute; border:55px solid red; border-color:transparent transparent red transparent; border-width:40px 55px; bottom:105px; left:-5px}
div:after {border-color:transparent transparent white transparent; border-width:34px 48px; left:2px}

<div></div>