如何在CSS中创建边框角点间距

如何使用CSS创建边框角间距，如下图所示？内容的高度不是固定的

---

您不能仅使用

边框

，但您可以使用

之后的
和
框影
来实现这一点

了解更多关于和的信息


div{
宽度：200px；
高度：100px；
背景#BB67E0；
位置：相对位置；
利润率：50像素；
文本对齐：居中；
线高：100px；
字体大小：30px；
颜色：#fff；
}
部门：之后{
位置：绝对位置；
内容：“；
宽度：2倍；
高度：80px；
背景：黑色；
左：-10px；
顶部：10px；
盒影：220px0黑色；
}
部门：以前{
位置：绝对位置；
内容：“；
高度：2倍；
宽度：180px；
背景：黑色；
左：10px；
顶部：-10px；
盒影：0 120px 0 0黑色；
}
content div
我承认这种方法很疯狂，但作为一种实验，如果您只支持现代浏览器，并且使用
剪辑路径
属性（用于切掉角点）播放一点（*），您可以尝试以下方法：


有些值以百分比表示，这就是为什么较高div中的垂直线较短的原因（这可以使用固定值来解决），但正如您所看到的，解决方案中不涉及高度。这种方法的另一个好处是响应性（尝试拉伸codepen输出面板）

（*）：我撒谎了。这不仅仅是“一点”：）
四个方面都很灵活

：before
伪元素创建左边框和右边框
：after
伪元素创建顶部和底部边框
边框的间距由
top
、
right
、
bottom
和
left
控制（具有left和right属性可在它们之间拉伸元素，与顶部和底部相同）

边界将始终保持指定的偏移距离

下面是一个很好的可视化伪元素布局方式的方法：


例子

div{
背景：紫色；
高度：50vh；
宽度：50vw；
保证金：50px自动；
位置：相对位置；
最小高度：200px；
最小宽度：200px；
}
部门：之前，
部门：之后{
内容：''；
位置：绝对位置；
顶部：60px；
左：-20px；
右：-20px；
底部：60px；
边框：实心4px#000；
}
部门：以前{
边界顶部：无；
边框底部：无；
}
部门：之后{
顶部：-20px；
左：60px；
右：60px；
底部：-20px；
左边界：无；
边界权：无；
}
使用：

我们可以使用指定一个
线性梯度
作为所有四边的边界图像。我们需要一个伪元素（与父容器重叠），因为渐变只能朝一个方向移动。渐变可以支持基于百分比的值，因此可以适应不同的容器尺寸。这可以通过将鼠标悬停在代码段中的
div
上进行验证

这种方法的主要缺点是，
边框图像
属性具有。但是，当只需要支持IE11+时，它非常有用，因为与
盒影
不同，它不需要固定的尺寸，不像
剪辑路径
那样复杂，并且还为其他潜在用途保留了一个备用的伪元素


。边框间距{
位置：相对位置；
高度：100px；
宽度：300px；
填充：10px；
背景：rgb（187103224）；
背景剪辑：内容框；
边框图像：线性渐变（至底部，透明25%，黑色15%，黑色75%，透明75%）；
边界图像切片：4；
边框图像宽度：4px；
边界图像重复：圆形；
/*只是为了演示*/
文本对齐：居中；
线高：100px；
颜色：白色；
}
.边框间距：后{
位置：绝对位置；
内容：''；
顶部：-2px；/*边框图像切片的一半*/
左：-2px；/*边框图像切片的一半*/
高度：计算（100%-20px）；/*100%-2*填充*/
宽度：计算（100%-20px）；/*100%-2*填充*/
填充：10px；
边框图像：线性渐变（向右，透明25%，黑色15%，黑色75%，透明75%）；
边界图像切片：4；
边框图像宽度：4px；
边界图像重复：圆形；
}
/*只是为了演示*/
.边界间距{
过渡：所有1；
}
.边框间距：悬停{
高度：150像素；
宽度：450px；
线高：150px；
}

内容分区
单角空间
很抱歉，我已经对@misterManSam解决方案做出了自己的解释：我想到达一个角落的空闲空间，在我的项目中将图标放在上面

div {
  background: purple;
  height: 200px;
  width: 200px;
  margin: 50px auto;
  position: relative;
  min-height: 200px; /* Just adjust as you wish */
  min-width: 200px; /* Just adjust as you wish */
}

div:before { /* Bottom half Borders */
  content: '';
  position: absolute;
  top: 60px; /* Height of left border */
             /* Higher value - smaller border line */
  left: -20px; /* Margin between div edge */
  right: -20px; /* Margin between div edge */
  bottom: -20px; /* Margin between div edge */
  border: solid 3px #000;
  border-top: none;
}

div:after { /* Top half Borders */
  content: '';
  position: absolute;
  top: -20px; /* Margin between div edge */
  left: 60px; /* Height of top border */
             /* Higher value - smaller border line */
  right: -20px; /* Margin between div edge */
  bottom: 60px;
  border: solid 3px #000;
  border-left: none;
  border-bottom: none;
}

HTML



纯HTML+CSS。
div的大小是否固定？你是如何决定从角落里得到多少收成的？@FabrizioCalderan其亲戚，用padding决定你能为content div添加现有的HTML和CSS吗？@Radian：我在这里添加了CSS3标记，尽管你之前没有包括它，因为我认为这是一个常见的问题，使用CSS3功能的方法也可以让未来的用户受益。如果您不同意，请随时回滚：）高度是相对的，而不是fixed@Radian再次查看我的邮件在你的邮件后，Bottom border消失了fix@Radian看看新的答案，新的答案解决了这一部分
div {
  background: purple;
  height: 200px;
  width: 200px;
  margin: 50px auto;
  position: relative;
  min-height: 200px; /* Just adjust as you wish */
  min-width: 200px; /* Just adjust as you wish */
}

div:before { /* Bottom half Borders */
  content: '';
  position: absolute;
  top: 60px; /* Height of left border */
             /* Higher value - smaller border line */
  left: -20px; /* Margin between div edge */
  right: -20px; /* Margin between div edge */
  bottom: -20px; /* Margin between div edge */
  border: solid 3px #000;
  border-top: none;
}

div:after { /* Top half Borders */
  content: '';
  position: absolute;
  top: -20px; /* Margin between div edge */
  left: 60px; /* Height of top border */
             /* Higher value - smaller border line */
  right: -20px; /* Margin between div edge */
  bottom: 60px;
  border: solid 3px #000;
  border-left: none;
  border-bottom: none;
}

<div></div>