html - 元素周围的虚线边框，左边框的顶部倾斜/成 Angular

Question

我想创建如下图所示的边框:

这段代码是我写的

<p>Some Text</p>

p{
  -webkit-transform: perspective(158px) rotateX(338deg);
  -webkit-transform-origin: right;
  border: 2px dashed red;
}

但是这段代码没有返回我期望的输出，并且与图像不同。我想像图像中那样倾斜左边框的顶部。边 Angular 。我如何创建带有附加图像样式的边框？谢谢

Answer 1

使用 CSS:

您可以使用几个伪边框和虚线边框对单个元素执行此操作。

形状形成如下:

• 元素底部和左侧(倾斜部分除外)的边框是使用父元素上的虚线边框创建的。
• 元素顶部的边框是使用 :after 伪元素创建的。这个伪元素的宽度比父元素小 40px，因为上边框仅在倾斜的边框区域之后开始。此元素的高度为 40 像素，使用绝对定位位于容器上方。
• 右侧的边框部分由父元素创建，部分由 :after 伪元素创建。
• 边框的倾斜区域是使用旋转的 :before 伪元素创建的。该元素的高度和宽度是使用用于计算直 Angular 三 Angular 形斜边的三 Angular 函数计算的。

输出也是响应式的，正如您将鼠标悬停在 div 上所看到的那样。

div {
  position: relative;
  height: 60px;
  width: 200px;
  border: 3px dashed red;
  border-width: 0px 3px 3px 3px;
  margin-top: 80px;
}
div:after {
  position: absolute;
  content: '';
  height: 40px;
  width: calc(100% - 40px);
  top: -40px;
  left: 40px;
  border-top: 3px dashed red;
  border-right: 3px dashed red;
}
div:before {
  position: absolute;
  content: '';
  height: 56.56px;
  width: 56.56px;
  top: 0%;
  left: -3px;
  border-top: 3px dashed red;
  transform: rotate(-45deg);
  transform-origin: left top;
}
/* just for demo */

div {
  transition: all 1s ease;
}
div:hover {
  height: 120px;
  width: 300px;
}

<div></div>

---

使用 SVG:

这也可以使用 SVG 创建。所需要的只是所需形状的路径(或多边形)，然后在路径上设置stroke-dasharray code> 创建虚线笔画。

div {
  position: relative;
  height: 100px;
  width: 300px;
}
svg {
  position: absolute;
  height: 100%;
  width: 100%;
  top: 0;
  left: 0;
}
path {
  fill: none;
  stroke: red;
  stroke-width: 2;
  stroke-dasharray: 10;
}

<div>
  <svg viewBox='0 0 300 100' preserveAspectRatio='none'>
    <path d='M40,2 298,2 298,98 2,98 2,40z' vector-effect='non-scaling-stroke' />
  </svg>
</div>