Question

我有一个 div（它实际上是一个 <th>，但我认为这无关紧要），其中包含一些动态大小的内容。

我想在父 div 中放置一个边框三角形，以填充它（基本宽度与 div 相同，高度与 div 高度相同）。

使用固定的父 div 大小，我可以按如下方式进行。如果没有固定的父 div 大小，是否可以做到这一点？如果有任何用处，我正在使用 VueJs

.crossedleft {
    background: 
       linear-gradient(to top left,
           rgba(0,0,0,0) 0%,
           rgba(0,0,0,0) calc(50% - 0.8px),
           rgba(0,0,0,1) 50%,
           rgba(0,0,0,0) calc(50% + 0.8px),
           rgba(0,0,0,0) 100%)
}

.crossedright {
    background: 
       linear-gradient(to top right,
           rgba(0,0,0,0) 0%,
           rgba(0,0,0,0) calc(50% - 0.8px),
           rgba(0,0,0,1) 50%,
           rgba(0,0,0,0) calc(50% + 0.8px),
           rgba(0,0,0,0) 100%)
}

<div style="height:50px;width:100px">
<div class="crossedleft" style="position:absolute; height:50px;width:50px">
<div class="crossedright" style="position:absolute; height:50px;width:50px;left:50px">
</div>
<pre>

    content

</pre>
</div>

Answer 1

改为将两个背景应用到 div：

.tri {
    background: 
       linear-gradient(to top left,
           rgba(0,0,0,0) 0%,
           rgba(0,0,0,0) calc(50% - 0.8px),
           rgba(0,0,0,1) 50%,
           rgba(0,0,0,0) calc(50% + 0.8px),
           rgba(0,0,0,0) 100%) left,  /* one on the left */
       linear-gradient(to top right,
           rgba(0,0,0,0) 0%,
           rgba(0,0,0,0) calc(50% - 0.8px),
           rgba(0,0,0,1) 50%,
           rgba(0,0,0,0) calc(50% + 0.8px),
           rgba(0,0,0,0) 100%) right; /* the other the right */
    background-size:50% 100%; /* both width:50% and height:100% */
    background-repeat:no-repeat;
}

<div style="width:100px" class="tri">
<pre>

    content

</pre>
</div>

您可以像下面那样简化代码：

.tri {
    --g:rgba(0,0,0,0) calc(50% - 0.8px),
        rgba(0,0,0,1) 50%,
        rgba(0,0,0,0) calc(50% + 0.8px);
    background: 
       linear-gradient(to top left,  var(--g)),
       linear-gradient(to top right, var(--g)) 100%; 
    background-size:50% 100%;
    background-repeat:no-repeat;
}

<div style="width:100px" class="tri">
<pre>

    content

</pre>
</div>

Answer 2

首先，您可以通过使用百分比来完全响应地使用自己的方法。您甚至可以像这样使用伪元素 ::before 和 ::after 来消除所有额外的元素：

.triangle {
  position: relative;
  display: inline-block;
  padding: 1em;
  border-bottom: 1px black solid;
}

.triangle::before,
.triangle::after {
  content: "";
  display: block;
  width: 50%;
  height: 100%;
  position: absolute;
  top: 0;
}

.triangle::before {
  left: 0;
  background: linear-gradient(to top left, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 0) calc(50% - 0.8px), rgba(0, 0, 0, 1) 50%, rgba(0, 0, 0, 0) calc(50% + 0.8px), rgba(0, 0, 0, 0) 100%)
}

.triangle::after {
  right: 0;
  background: linear-gradient(to top right, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 0) calc(50% - 0.8px), rgba(0, 0, 0, 1) 50%, rgba(0, 0, 0, 0) calc(50% + 0.8px), rgba(0, 0, 0, 0) 100%)
}

<div class="triangle">Short</div>
<div class="triangle">This is a very long sentence</div>

但是，在这种情况下，您最好使用 SVG 背景，因为它可以包含您喜欢的任何形状。使用像三角形这样的简单形状，您甚至可以将其嵌入到您的 CSS 中：

.triangle {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' version='1.0' viewBox='0 0 100 100' preserveAspectRatio='none'%3E%3Cpolygon points='50,1 98,98 1,98' fill='none' stroke='black' stroke-width='1px' vector-effect='non-scaling-stroke' /%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-size: 100% 100%;
  display: inline-block;
  padding: 1em;
}

<div class="triangle">Short</div>
<div class="triangle">This is a very long sentence</div>

这个例子中的SVG是

<svg xmlns="http://www.w3.org/2000/svg" version="1.0" viewBox="0 0 100 100" preserveAspectRatio="none">
  <polygon points="50,1 99,99 1,99" fill="none" stroke="black"  stroke-width="1px" vector-effect="non-scaling-stroke" />
</svg>

DIV 中的三角形边框

2 个答案: