如何：CSS边框中间有一个风筝形状

Question

我想要一个简单线条的边框，但在它的中间有一个风筝形状的方形，有些像这样：

但是我宁愿不使用图像边框，因为如果div是拉伸＆＃34;风筝＆＃34;看起来也像是拉伸，我希望自己的风筝具有固定的大小（从左边缘向右边10px），其余的是直线。

提前致谢。

Answer 1

您可以使用css transform和:before pseudo-element来实现这一目标：

＆＃13;

＆＃13;

div {
  position: relative;
  border: 1px solid #FF0000;
  top: 100px;
}

div:before {
  content: "";
  width: 10px;
  height: 10px;
  background: #FF0000;
  position: absolute;
  transform: rotate(45deg);
  left: 50%;
  margin-left: -5px;
  transform-origin: 100% 0%;
}

＆＃13;

<div></div>

＆＃13;

＆＃13;

＆＃13;

Answer 2

HTML：

<div class="kite-separator"><span class="kite-center"></span></div>

CSS：

.kite-separator  {
  width: 100%;
  height: 2px;
  background-color:#cb0009;
  position:relative;
}
.kite-center {
  display: block;
    width: 8px;
    height: 8px;
    background-color: #cb0009;
    position: absolute;
    left: 50%;
    top: -3px;
    margin-left: -4px;
    transform: rotate(45deg);
}

工作示例：https://jsfiddle.net/azq2gcqq/

Answer 3

如果你只需要一个方格，我会选择伪元素::之后像这样https://jsfiddle.net/6fLuagsv/

.class-with-border{
  position: relative;
  box-sizing: border-box;
  height: 100px;
  border: 3px solid #c00;
  width: 100px;
}

.class-with-border::after{
  content: '';
  position: absolute;
  bottom: -8px;
  left: 50%;
  width: 8px;
  height: 8px;
  border-radius: 1px;
  background-color: #c00;
  transform: rotate(45deg) translateX(-50%);
}

如果你需要每边一个方格，只需在容器中插入4个元素并根据需要调整它们。