元素周围的虚线边框，左侧边框的顶部偏斜/倾斜

Question

我想创建下图所示的边框：

我已经写了这段代码

<p>Some Text</p>

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

但是此代码不会返回我期望的输出，并且与图像有所不同。我想像图像一样倾斜左边框的顶部。边界角。如何创建带有附加图像样式的边框？谢谢

Answer 1

使用CSS：

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

形状形成如下：

• 使用父元素上的虚线边框在元素的底部和左侧（除倾斜部分之外）创建边框。
• 元素顶部的边框是使用:after伪元素创建的。该伪元素的宽度比父元素少40像素，因为顶部边框仅在倾斜的边框区域之后开始。此元素的高度为40px，并使用绝对定位将其定位在容器上方。
• 右侧的边框部分由父元素创建，部分由:after伪元素创建。
• 使用旋转的:before伪元素创建边框的偏斜区域。此元素的高度和宽度是使用三角公式计算的，用于计算直角三角形的斜边。

您也可以通过将鼠标悬停在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创建。所需的只是一个所需形状的path（或polygon），然后stroke-dasharray在上设置path以创建虚线笔划。

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>