是否可以绘制带有 1 个角的边框？

Question

我希望在 div 周围绘制实线边框，唯一的问题是我希望 1 个角为 "dog eared"（见附图）。

这可以在 CSS 中完成吗？我找到了 clip-path，但这似乎并没有自愿接受边框。

请注意，我也想用内容填充此区域 - text/images。

Answer 1

这里是线性渐变的解决方案：

.box {
  height:100px;
  width:200px;
  background:linear-gradient(to bottom,red 50%,transparent 0) 0 0/calc(100% - 20px) 2px no-repeat,
  linear-gradient(to bottom,transparent 50%,red 0) 0 100%/100% 2px no-repeat,
  linear-gradient(to right,red 50%,transparent 0) 0 0/2px 100% no-repeat,
  linear-gradient(to right,transparent 50%,red 0) 100% 20px/2px 100% no-repeat,
  linear-gradient(to top right,transparent 50%,red 50%,red calc(50% + 1px),transparent calc(50% + 2px)) 100% 0/20px 20px no-repeat;
}

<div class="box">
</div>

对于剪辑路径解决方案，您可以这样做：

.box {
  height:100px;
  width:200px;
  background:linear-gradient(to top right,transparent 50% ,red 0) 100% 0/20px 20px no-repeat;
  border:2px solid red;
  clip-path:polygon(1px 1px,1px calc(100% - 1px),calc(100% - 1px) calc(100% - 1px),calc(100% - 1px) calc(100% - 84px), calc(100% - 20px) 1px);
}

<div class="box">
</div>

这里是另一种使用伪元素和倾斜变换的方法：

.box {
  height: 80px;
  width: 200px;
  margin-top: 50px;
  border: 1px solid red;
  border-top: none;
  position: relative;
}

.box:before {
  content: "";
  position: absolute;
  left: -1px;
  right: 50%;
  top: -20px;
  height: 20px;
  border-top: 1px solid red;
  border-left: 1px solid red;
}

.box:after {
  content: "";
  position: absolute;
  right: -1px;
  left: 50%;
  top: -20px;
  height: 20px;
  border-top: 1px solid red;
  border-right: 1px solid red;
  transform: skew(45deg);
  transform-origin: bottom right;
}

<div class="box">
</div>

是否可以绘制带有 1 个角的边框？

Is it possible to draw a border with 1 angled corner?

html

css

css-shapes