带边框但仅在一侧的挖角

Question

所以我正在尝试在整个结构周围创建带有边框的挖角（仅在右下角）。请参考下图。

Check image here

我看过很多关于如何在所有 4 个边上创建凹角和仅在一侧创建凹角的示例。但是找不到这个特定用例的任何内容。

我是 CSS 的初学者。所以我的问题也可能很菜鸟。提前致谢。

Answer 1

由于此独家新闻仅用于视觉效果而不是附加任何语义，因此使用简单 CSS 执行此操作的一种方法是使用伪元素来创建它，将其置于实际元素之上，然后具有背景颜色，因此它会覆盖底部的边框。

为了使这个通用，您可以引入 CSS 变量来按比例设置大小和定位，但为了让您开始，这里是一个使用 vmin 作为大小单位的示例：

body {
  background-color: black;
}

div {
  width: 90vmin;
  height: 90vmin;
  position: relative;
  border: solid 3px lime;
  border-radius: 10vmin;
  background-color: gray;
}

div::after {
  content: '';
  position: absolute;
  width: 40%;
  height: 40%;
  border-color: transparent transparent transparent lime;
  border-width: 3px;
  border-style: solid;
  top: 80%;
  left: 80%;
  border-radius: 50%;
  transform: rotate(45deg);
  background-color: black;
}

<div></div>

带边框但仅在一侧的挖角

Scooped Corners with border but only on one side

css

sass