Html 带圆角帽的 CSS 部分边框

发布于07月13日

我正在try 创建一个带有圆头的部分边框的矩形.如下图所示:

我走了这么远就是为了移除一部分边界.但我想不出一种简单的方法来得到照片中的结果:

body {
    position: relative;
}

div.inner {
    position: absolute;
    top: 10px;
    left: 10px;
    display: inline-block;
    width: 420px;
    height: 320px;
    background-color: #f80;
    border-radius: 40px;
}

div.border {
    position: absolute;
    display: inline-block;
    width: 400px;
    height: 300px;
    background-color: transparent;
    border-radius: 40px;
    border: 20px solid black;
    clip-path: polygon(0% 0%, 0% 100%, 100% 100%, 100% 0%, 60% 0%, 60% 75%, 25% 75%, 25% 0%);
}

<body>
  <div class="inner"></div>
  <div class="border"></div>
</body>

推荐答案

这是一个使用一个元素的 idea .它可能看起来很复杂，但您所要做的就是调整css变量

.box {
  --t: 20px; /* border thickness */
  --c: #000; /* border color */
  --x: 30%; /* the start of the gap */
  --y: 60%; /* the end of the gap */

  margin: 50px;
  width: 300px;
  height: 200px;
  background: orange; /* background color */
  position: relative;
  border-radius: 40px; /* radius */
}
/* you don't need to touch the below*/
.box:before {
  content:"";
  position: absolute;
  inset: calc(var(--t)/-2);
  border-radius: inherit;
  padding: var(--t);  
  --g: calc(var(--t)/2), var(--c) 49%,#0000 51%;
  background: 
   radial-gradient(var(--t) at var(--x) var(--g)),
   radial-gradient(var(--t) at var(--y) var(--g)),
   linear-gradient(90deg,var(--c) var(--x),#0000 0 var(--y),var(--c) 0),
   linear-gradient(var(--c) 0 0) 0 var(--t) no-repeat;
  -webkit-mask:
    linear-gradient(#000 0 0),
    linear-gradient(#000 0 0) content-box;
  -webkit-mask-composite: xor;
          mask-composite: exclude;
}

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

<div class="box" style="--t: 26px;--x: 50px;--y: 80%"></div>

Html相关问答推荐

如何防止SVG图标出现断行？

在悬停时应用文本装饰

如果DIV没有特定的sibling 姐妹，则以CSS为目标

子元素的单一背景

默认情况下使用Disbale Scroll，但在单击图标后将其激活

在css中是否可以在遮罩图像中结合线性渐变和径向渐变？

如何防止弹性项目溢出容器？

如何将元素与常规文本垂直对齐

四开：如何右对齐 PDF 和 HTML 中的文本

我真的需要一个容器来让行和列正常工作吗？ ( bootstrap 程序 v5)

Django 如何从文件系统下载文件？

网页爬虫：使用时光机器进行数据采集

从 Vue 应用程序的容器元素渲染 HTML

使用图像自定义 CSS 网格边框

输入框不是全宽

父背景仅在子元素中可见

如何让 backdrop-filter： blur() 效果在 iOS 上运行？

如何将第一个 p 标签放在其下方第二个 p 标签的中间

使元素扩展宽度减go margin-right

尽管设置了 width：100% left：0，但居中对齐的 CSS 动画并不对称

实用课程推荐