元素周围的虚线边框，左边框的顶部为 skewed/angled

Question

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

这段代码是我写的

<p>Some Text</p>

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

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

Answer 1

如果需要对角线边框，可以堆叠 2 个 div，每个 div 一个伪元素：

DEMO

HTML

<div id="grey"></div>
<div class="container">
  <div class="diagonal">
    <h2>Header title</h2>
    <p>Yes a CSS diagonal corner is possible</p>
  </div>
  <div class="diagonal2">
    <h2>Header title</h2>
    <p>Yes a CSS diagonal corner with background image is possible</p>
  </div>
  <div class="diagonal3">
    <div class="inside">
      <h2>Header title</h2>
      <p>Yes a CSS diagonal border is even possible with an extra div</p>
    </div>
  </div>
</div>

CSS

 .container {
  padding: 100px 200px;
  overflow: hidden;
}

div.diagonal {
  background: #da1d00;
  color: #fff;
  font-family: Arial, Helvetica, sans-serif;
  width: 300px;
  height: 300px;
  padding: 70px;
  position: relative;
  margin: 30px;
  float: left;
}

div.diagonal2 {
  background: #da1d00;
  color: #fff;
  font-family: Arial, Helvetica, sans-serif;
  width: 300px;
  height: 300px;
  padding: 70px;
  position: relative;
  margin: 30px;
  background: #da1d00 url(http://www.remcokalf.nl/background.jpg) left top;
  background-size: cover;
  float: left;
}

div.diagonal3 {
  background: #da1d00;
  color: #da1d00;
  font-family: Arial, Helvetica, sans-serif;
  width: 432px;
  height: 432px;
  padding: 4px;
  position: relative;
  margin: 30px;
  float: left;
}

div.inside {
  background: #fff;
  color: #da1d00;
  font-family: Arial, Helvetica, sans-serif;
  width: 292px;
  height: 292px;
  padding: 70px;
  position: relative;
}

div.diagonal:before,
div.diagonal2:before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  border-top: 80px solid #fff;
  border-right: 80px solid transparent;
  width: 0;
}

div.diagonal3:before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  border-top: 80px solid #da1d00;
  border-right: 80px solid transparent;
  width: 0;
  z-index: 1;
}

div.inside:before {
  content: '';
  position: absolute;
  top: -4px;
  left: -4px;
  border-top: 74px solid #fff;
  border-right: 74px solid transparent;
  width: 0;
  z-index: 2;
}

h2 {
  font-size: 30px;
  line-height: 1.3em;
  margin-bottom: 1em;
  position: relative;
  z-index: 1000;
}

p {
  font-size: 16px;
  line-height: 1.6em;
  margin-bottom: 1.8em;
}

#grey {
  width: 100%;
  height: 400px;
  background: #ccc;
  position: relative;
  margin-top: 100px;
}

#grey:before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  border-top: 80px solid #fff;
  border-right: 80px solid #ccc;
  width: 400px;
}

Answer 2

使用CSS:

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

形状形成如下：

元素底部和左侧（倾斜部分除外）的边框是使用父元素上的虚线边框创建的。
元素顶部的边框是使用 :after 伪元素创建的。这个伪元素的宽度比父元素小 40px，因为上边框仅在倾斜的边框区域之后开始。此元素的高度为 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）的所需形状，然后在 path 上设置 stroke-dasharray 以创建虚线笔划。

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>

Answer 3

您还可以混合使用边框、背景渐变并使用伪元素来推动文本并绘制对角线虚线边框：

p {
  text-indent:1.5em;
  margin:1em;
  padding:0.5em;
  width:36em;
  border:4px dashed red;
  border-top:none;
  border-left:none;
  background:repeating-linear-gradient(to left,transparent 0,transparent 10px, red 10px, red 20px) no-repeat top right,
    repeating-linear-gradient(to bottom,transparent 0,transparent 10px, red 10px, red 20px) no-repeat bottom left;
    ;
  background-size:88% 4px, 4px 80%, 100% 3px;
  overflow:hidden;
  text-align:justify;
}
p:before {
  content:'';
  padding:3% 4%;
  margin-right:-2em;
  float:left;
  border-bottom:dashed 4px red;
  transform-origin: bottom left;
  transform:rotate(-35deg);
}

<p>Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum tortor quam, feugiat vitae, ultricies eget, tempor sit amet, ante. Donec eu libero sit amet quam egestas semper. Aenean ultricies mi vitae est. Mauris placerat eleifend leo. Quisque sit amet est et sapien ullamcorper pharetra. Vestibulum erat wisi, condimentum sed, commodo vitae, ornare sit amet, wisi. Aenean fermentum, elit eget tincidunt condimentum, eros ipsum rutrum orci, sagittis tempus lacus enim ac dui. Donec non enim in turpis pulvinar facilisis. Ut felis. Praesent dapibus, neque id cursus faucibus, tortor neque egestas augue, eu vulputate magna eros eu erat. Aliquam erat volutpat. Nam dui mi, tincidunt quis, accumsan porttitor, facilisis luctus, metus</p>

codepen to play with

元素周围的虚线边框，左边框的顶部为 skewed/angled

Dashed border around an element with the top part of left border being skewed/angled

html

css

border

css-shapes