logo标签列表

一个元素周围有虚线边框，左侧顶部的边框是倾斜/角度的。

htmlcssbordercss-shapes
3
我希望创建类似下图所示的边框： top left corner border 我已经编写了以下代码：
<p>Some Text</p>

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

但是这段代码没有返回我期望的输出，而且与图片不同。我想要像图片中那样倾斜左边框的顶部部分。 边框角落。 我该如何创建带有附加图像样式的边框？ 谢谢。
可能是这个帖子的重复：https://dev59.com/J2w05IYBdhLWcg3wv0R6 - Aaron Lavers
@AaronLavers，谢谢你的回答，但是这个链接和我的问题不同，我想要用边框实现这个。 - Kalim
3个回答
5

使用CSS:

您可以使用几个伪元素和虚线边框来创建单个元素的形状。

形状的创建如下：

  • 元素底部和左侧（除了斜边部分）的边框是在父元素上使用虚线边框创建的。
  • 元素顶部的边框是使用:after伪元素创建的。这个伪元素比父元素窄40像素，因为顶部边框仅从斜边区域之后开始。该元素高度为40像素，并使用绝对定位在容器上方定位。
  • 右侧边框由父元素和: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>

1

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

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 一起玩耍

0
如果您需要一个对角线边框，可以使用两个带有伪元素的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;
}
我的电脑有问题吗？还是说这个演示根本没有虚线边框？我在演示中没有看到。 - Harry
1
点状边框在哪里？ - Leo the lion
网页内容由stack overflow 提供, 点击上面的
可以查看英文原文，
原文链接