我有一个div（嗯，实际上是一个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>将两个背景都应用于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>本文收集自互联网，转载请注明来源。
如有侵权，请联系 [email protected] 删除。
我来说两句